:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f8f8f8;
    --vt-c-white-mute: #f2f2f2;
    --vt-c-black: #181818;
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;
    --vt-c-indigo: #2c3e50;
    --vt-c-divider-light-1: rgba(60, 60, 60, .29);
    --vt-c-divider-light-2: rgba(60, 60, 60, .12);
    --vt-c-divider-dark-1: #545454a6;
    --vt-c-divider-dark-2: rgba(84, 84, 84, .48);
    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, .66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark-2: rgba(235, 235, 235, .64)
}

:root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);
    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);
    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
    --section-gap: 160px;
    --s-c-bg-primary: linear-gradient(137deg, #4095bb 0%, #1f759c 100%);
    --s-c-bg-primary-soft: linear-gradient(137deg, #57b3dc 0%, #278fbe 100%);
    --s-c-primary: #4095bb;
    --s-c-primary-dark: #234452;
    --s-c-primary-hover: #3888ad;
    --s-c-secondary: #ffffff;
    --s-c-grey: #b9b9b9;
    --s-c-bg-secondary: linear-gradient(106deg, #262626 0%, #2f2f2f 100%);
    --s-c-border: #606060;
    --s-c-disabled: #303030;
    --s-c-dark-2: #010101;
    --s-c-dark-soft: #2f2f2f;
    --s-c-dark-soft-2: #1c1c1c;
    --s-c-scrollbar-track: var(--vt-c-black-soft);
    --s-c-scrollbar-thumb: var(--vt-c-divider-dark-1);
    --s-c-scrollbar-thumb-hover: var(--vt-c-divider-dark-2)
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    font-weight: 400
}

* {
    font-family: Montserrat, Helvetica Neue, sans-serif
}

@font-face {
    font-family: Material Icons;
    src: url(../icons.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    src: url(../montserrat/Montserrat-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    src: url(../montserrat/Montserrat-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

#app {
    width: 100%;
    height: 100%

    .dc-smarter-roi--icon {
        font-family: Material Icons;
        font-size: 24px
    }

    .dc-smarter-roi--s-icon--icon {
        font-family: Material Icons;
        flex-shrink: 0;
        color: var(--s-c-secondary);
        line-height: 1
    }

    .dc-smarter-roi--s-button--button {
        display: inline-block;
        padding: 0 16px;
        font-size: 20px;
        min-width: 100px;
        border: none;
        border-radius: 5px;
        height: 55px;
        cursor: pointer;
        background-color: var(--s-c-primary);
        color: #fff;
        transition: background-color .3s ease;
        font-family: Montserrat, Helvetica Neue, sans-serif
    }

    .dc-smarter-roi--s-button--button:hover {
        background-color: var(--s-c-primary-hover);
        transform: scale(.99)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--light {
        background-color: var(--s-c-secondary);
        color: var(--s-c-primary)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--light:hover {
        color: var(--s-c-primary-hover)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--outline {
        background-color: transparent;
        border: 2px solid var(--s-c-primary);
        color: var(--s-c-primary)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--outline:hover {
        background-color: var(--s-c-primary-hover);
        color: #fff
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--outline.dc-smarter-roi--light {
        border-color: var(--s-c-secondary);
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--outline.dc-smarter-roi--light:hover {
        background-color: var(--s-c-secondary-hover);
        color: #fff
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--inline {
        background-color: transparent;
        color: var(--s-c-primary);
        padding: 0
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--inline.dc-smarter-roi--light {
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--inline.dc-smarter-roi--light:hover {
        color: var(--s-c-secondary-hover)
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--inline:hover {
        color: var(--s-c-primary-hover)
    }

    .dc-smarter-roi--s-button--button .dc-smarter-roi--s-button--label {
        display: block;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .dc-smarter-roi--s-button--button .dc-smarter-roi--s-button--label .dc-smarter-roi--label-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px
    }

    .dc-smarter-roi--s-button--button .dc-smarter-roi--responsive-icon {
        display: none
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--disabled {
        background-color: var(--s-c-disabled);
        color: var(--s-c-secondary);
        cursor: not-allowed
    }

    .dc-smarter-roi--s-button--button.dc-smarter-roi--disabled:hover {
        background-color: var(--s-c-disabled);
        transform: none
    }

    @media (max-width: 768px) {
        .dc-smarter-roi--s-button--button.dc-smarter-roi--responsiveIcon {
            display: inline-block;
            font-size: 24px;
            padding: 0 !important;
            width: 55px;
            min-width: 0
        }

        .dc-smarter-roi--s-button--button.dc-smarter-roi--responsiveIcon .dc-smarter-roi--responsive-icon {
            display: block
        }

        .dc-smarter-roi--s-button--button.dc-smarter-roi--responsiveIcon .dc-smarter-roi--s-button--label {
            display: none
        }
    }

    .dc-smarter-roi--appointment {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px
    }

    .dc-smarter-roi--appointment .dc-smarter-roi--s-appointment--description {
        font-size: 16px;
        color: var(--s-c-secondary);
        text-align: start
    }

    .dc-smarter-roi--appointment .dc-smarter-roi--s-appointment--button {
        line-height: 26px;
        height: auto;
        padding: 8px 16px
    }

    .dc-smarter-roi--appointment.dc-smarter-roi--right {
        justify-content: flex-end !important;
        align-items: flex-end !important
    }

    .dc-smarter-roi--appointment.dc-smarter-roi--right .dc-smarter-roi--s-appointment--description {
        text-align: end
    }

    .dc-smarter-roi--appointment.dc-smarter-roi--center {
        align-items: center;
        justify-content: center;
        text-align: center
    }

    @media (max-width: 1120px) {
        .dc-smarter-roi--appointment {
            align-items: center;
            justify-content: center;
            text-align: center
        }
    }

    .dc-smarter-roi--stepper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 8px
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--step-outline {
        width: 100%;
        max-width: 70px;
        height: 24px;
        background-color: transparent;
        padding: 4px;
        border-radius: 12px;
        cursor: not-allowed
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--step-outline .dc-smarter-roi--step {
        background-color: var(--s-c-disabled);
        height: 100%;
        width: 100%;
        border-radius: 8px
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--step-outline.dc-smarter-roi--activated {
        cursor: pointer;
        background: transparent
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--step-outline.dc-smarter-roi--activated .dc-smarter-roi--step {
        background: var(--s-c-primary-dark)
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--step-outline.dc-smarter-roi--s-stepper--active {
        cursor: pointer;
        background: var(--s-c-bg-primary-soft)
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--step-outline.dc-smarter-roi--s-stepper--active .dc-smarter-roi--step {
        background: var(--s-c-bg-primary)
    }

    .dc-smarter-roi--stepper .dc-smarter-roi--indicator {
        display: none
    }

    @media (max-width: 768px) {
        .dc-smarter-roi--stepper .dc-smarter-roi--step-outline {
            display: none
        }

        .dc-smarter-roi--stepper .dc-smarter-roi--indicator {
            display: block;
            color: var(--s-c-secondary);
            font-size: 14px;
            font-weight: 500;
            background: var(--s-c-bg-secondary);
            height: 40px;
            width: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center
        }
    }

    .dc-smarter-roi--select {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 16px
    }

    .dc-smarter-roi--s-select--option {
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        height: 55px;
        padding: 0 16px;
        border-radius: 5px;
        cursor: pointer;
        background-color: var(--s-c-dark-2);
        color: var(--s-c-secondary);
        width: 100%
    }

    .dc-smarter-roi--s-select--option.dc-smarter-roi--selectedOption {
        background: var(--s-c-bg-primary)
    }

    .dc-smarter-roi--s-select--circle {
        width: 24px;
        height: 24px;
        border: 2px solid var(--s-c-secondary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        flex-shrink: 0
    }

    .dc-smarter-roi--s-select--circle.dc-smarter-roi--multiple {
        border-radius: 5px
    }

    .dc-smarter-roi--selected-dot {
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background-color: var(--s-c-secondary)
    }

    .dc-smarter-roi--text-option {
        background-color: var(--s-c-dark-2);
        color: var(--s-c-secondary);
        padding: 16px;
        width: 100%;
        height: 200px;
        border: none;
        border-radius: 5px;
        resize: none;
        font-size: 16px
    }

    .dc-smarter-roi--text-option:focus {
        border: 2px solid var(--s-c-primary);
        outline: none
    }

    .dc-smarter-roi--text-option::placeholder {
        color: var(--s-c-grey)
    }

    .dc-smarter-roi--selectedTextOption {
        border: 2px solid var(--s-c-primary)
    }

    .dc-smarter-roi--slider {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .dc-smarter-roi--slider .dc-smarter-roi--sliderValue {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%
    }

    .dc-smarter-roi--slider .dc-smarter-roi--sliderValue .dc-smarter-roi--answer-short {
        font-size: 32px;
        display: block;
        text-align: center;
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--slider .dc-smarter-roi--sliderValue .dc-smarter-roi--s-slider--answer {
        font-size: 20px;
        color: var(--s-c-primary);
        font-weight: 700;
        text-align: center
    }

    .dc-smarter-roi--slider input[type=range] {
        width: 100%;
        outline: none;
        border: none;
        -webkit-appearance: none;
        background: transparent
    }

    .dc-smarter-roi--slider input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: var(--s-c-primary);
        cursor: pointer;
        margin-top: -10px
    }

    .dc-smarter-roi--slider input[type=range]::-moz-range-thumb {
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: var(--s-c-primary);
        cursor: pointer
    }

    .dc-smarter-roi--slider input[type=range]::-webkit-slider-runnable-track {
        height: 6px;
        background: linear-gradient(to right, var(--s-c-primary) 0%, var(--s-c-primary) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) 100%);
        border-radius: 4px
    }

    .dc-smarter-roi--slider input[type=range]::-moz-range-track {
        height: 6px;
        background: linear-gradient(to right, var(--s-c-primary) 0%, var(--s-c-primary) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) 100%);
        border-radius: 4px
    }

    .dc-smarter-roi--slider .dc-smarter-roi--scale {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 8px
    }

    .dc-smarter-roi--slider .dc-smarter-roi--scale span {
        font-size: 16px;
        color: var(--s-c-grey)
    }

    @media (max-width: 1120px) {
        .dc-smarter-roi--slider .dc-smarter-roi--scale span {
            font-size: 16px
        }
    }

    .dc-smarter-roi--options {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-top: 16px
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option {
        position: relative;
        overflow: hidden;
        flex-grow: 1;
        flex: 1;
        background-size: cover;
        min-height: 300px;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to top, #000c, #0000);
        z-index: 1
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        justify-content: space-between
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content .dc-smarter-roi--top {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content .dc-smarter-roi--top .dc-smarter-roi--selection {
        width: 32px;
        height: 32px;
        border: 2px solid var(--s-c-secondary);
        border-radius: 50%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content .dc-smarter-roi--top .dc-smarter-roi--selection.dc-smarter-roi--s-yes-no--active {
        border-color: var(--s-c-primary)
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content .dc-smarter-roi--top .dc-smarter-roi--selection .dc-smarter-roi--s-yes-no--active {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--s-c-primary)
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content .dc-smarter-roi--bottom h3 {
        font-size: 20px;
        color: var(--s-c-secondary);
        font-weight: 600
    }

    .dc-smarter-roi--options .dc-smarter-roi--s-yes-no--option .dc-smarter-roi--option-content .dc-smarter-roi--bottom p {
        font-size: 16px;
        color: var(--s-c-grey)
    }

    @media (max-width: 1120px),(max-height: 850px) {
        h3 {
            font-size: 16px !important
        }

        p {
            font-size: 14px !important
        }
    }

    @media (max-width: 768px) {
        .dc-smarter-roi--options {
            flex-direction: column;
            align-items: center
        }
    }

    .dc-smarter-roi--container {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: visible;
        padding: 32px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide {
        height: 100%;
        position: relative
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information {
        height: calc(100% - 24px);
        min-height: 730px;
        width: calc(100% - 24px);
        background: var(--s-c-bg-primary);
        border-radius: 16px;
        padding: 24px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content {
        height: 100%;
        width: calc(50% - 24px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--s-slide--logo {
        width: 100%;
        max-width: 120px;
        margin-bottom: 24px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--s-slide--headline {
        color: #fff;
        font-family: Montserrat;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        margin-bottom: 16px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--s-slide--description {
        color: #fff;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction {
        background: var(--s-c-bg-secondary);
        height: calc(100% - 24px);
        width: 50%;
        position: absolute;
        border-radius: 16px;
        top: 24px;
        right: 0;
        box-shadow: 0 0 24px #ffffff29;
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs {
        display: flex;
        flex-direction: column;
        gap: 24px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 24px;
        align-items: flex-start;
        width: 100%
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs::-webkit-scrollbar {
        width: 8px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs::-webkit-scrollbar-thumb {
        background: var(--s-c-scrollbar-thumb);
        border-radius: 4px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs::-webkit-scrollbar-track {
        background: var(--s-c-scrollbar-track);
        border-radius: 4px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs .dc-smarter-roi--input-wrapper {
        border-bottom: 1px solid var(--s-c-border);
        padding-bottom: 24px;
        width: 100%
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs .dc-smarter-roi--input-wrapper .dc-smarter-roi--s-slide--label {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom: 16px
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs .dc-smarter-roi--input-wrapper:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--impact {
        padding: 24px;
        border-radius: 0 0 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        background-color: var(--s-c-dark-2)
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--impact .dc-smarter-roi--s-slide--label {
        color: #fff;
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--impact .dc-smarter-roi--value {
        color: #fff;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%
    }

    .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--impact .dc-smarter-roi--value b {
        color: #4095bb;
        font-weight: 700
    }

    .dc-smarter-roi--container .dc-smarter-roi--toolbar {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-shrink: 0;
        height: 55px;
        z-index: 10
    }

    .dc-smarter-roi--container .dc-smarter-roi--toolbar .dc-smarter-roi--left {
        padding-right: 16px;
        flex-shrink: 0;
        border-right: 1px solid var(--s-c-border);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .dc-smarter-roi--container .dc-smarter-roi--toolbar .dc-smarter-roi--center {
        flex-grow: 1;
        height: 100%;
        margin: 0 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .dc-smarter-roi--container .dc-smarter-roi--toolbar .dc-smarter-roi--right {
        padding-left: 16px;
        flex-shrink: 0;
        border-left: 1px solid var(--s-c-border);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px
    }

    @media (max-width: 1120px),(max-height: 850px) {
        .dc-smarter-roi--container {
            padding: 0 0 32px !important;
            overflow: auto !important;
            height: auto !important
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information {
            width: 100%;
            height: auto;
            margin-bottom: -190px;
            border-radius: 0;
            padding-bottom: 200px !important
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content {
            width: 100%;
            align-items: center;
            text-align: center
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--s-slide--logo {
            max-width: 80px
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--s-slide--headline {
            font-size: 32px;
            margin-bottom: 12px
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--s-slide--description {
            font-size: 16px
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--information .dc-smarter-roi--s-slide--content .dc-smarter-roi--appointment {
            display: none
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction {
            width: calc(100% - 32px);
            margin-left: 16px;
            position: relative !important;
            border-radius: 16px;
            height: auto !important
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs .dc-smarter-roi--input-wrapper {
            width: 100%
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--inputs .dc-smarter-roi--input-wrapper .dc-smarter-roi--s-slide--label {
            font-size: 16px !important
        }

        .dc-smarter-roi--container .dc-smarter-roi--slide .dc-smarter-roi--interaction .dc-smarter-roi--impact .dc-smarter-roi--value {
            font-size: 20px
        }

        .dc-smarter-roi--container .dc-smarter-roi--toolbar {
            position: relative;
            bottom: 0;
            left: 0;
            right: 0;
            top: 30px;
            background: var(--color-background);
            overflow: hidden;
            padding: 0 16px !important;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }
    }

    .dc-smarter-roi--value b {
        color: #4095bb !important;
        font-weight: 700 !important
    }

    .dc-smarter-roi--language-switch {
        display: flex;
        justify-content: center;
        background: var(--s-c-bg-secondary);
        padding: 4px;
        border-radius: 30px;
        height: 55px
    }

    .dc-smarter-roi--language-switch .dc-smarter-roi--language-options {
        display: flex;
        gap: 4px
    }

    .dc-smarter-roi--language-switch .dc-smarter-roi--language-options button {
        padding: 8px 16px;
        border: none;
        border-radius: 30px;
        background-color: transparent;
        cursor: pointer;
        font-size: 16px;
        color: var(--s-c-primary)
    }

    .dc-smarter-roi--language-switch .dc-smarter-roi--language-options button:nth-child(1) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px
    }

    .dc-smarter-roi--language-switch .dc-smarter-roi--language-options button:nth-child(2) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px
    }

    .dc-smarter-roi--language-switch .dc-smarter-roi--language-options button.dc-smarter-roi--s-language-switch--active {
        background: var(--s-c-bg-primary);
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--language-switch .dc-smarter-roi--language-options button:hover {
        background: var(--s-c-primary-hover);
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--modal-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000e6;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
        padding: 16px
    }

    .dc-smarter-roi--modal {
        background-color: var(--s-c-dark-soft-2);
        border-radius: 16px;
        overflow: auto;
        max-height: calc(100svh - 32px);
        width: 100%;
        max-width: 800px;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-top: 200px;
        height: auto
    }

    .dc-smarter-roi--modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background-color: var(--s-c-dark-soft);
        position: sticky;
        top: 0
    }

    .dc-smarter-roi--modal-body {
        padding: 32px 16px
    }

    .dc-smarter-roi--modal-body.dc-smarter-roi--no-padding {
        padding: 0
    }

    .dc-smarter-roi--title {
        color: var(--s-c-secondary);
        font-size: 20px;
        font-weight: 600
    }

    .dc-smarter-roi--close {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--close:hover {
        color: var(--s-c-hover-secondary)
    }

    .dc-smarter-roi--introduction {
        width: 100%;
        height: 100%
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        gap: 16px
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left {
        width: calc(50% - 16px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px;
        height: 100%
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--responsive-header {
        display: none
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--s-introduction--logo {
        height: 100px;
        width: auto;
        margin-bottom: 48px
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--s-introduction--headline {
        color: #fff;
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--s-introduction--description {
        margin-top: 16px;
        margin-bottom: 24px;
        color: #fff;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 125%
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--button-row {
        display: flex;
        flex-direction: row;
        width: 100%
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--button-row .dc-smarter-roi--video-button {
        display: none
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--button-description {
        color: #cbcbcb;
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        margin-top: 12px
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--responsive-partners {
        display: none
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right {
        position: relative;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        background-image: url(../media/start/intro.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: calc(50% - 16px)
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000b3 30%, #0000);
        z-index: 1
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right .dc-smarter-roi--language-switch-x {
        z-index: 2;
        position: absolute;
        right: 20px;
        top: 20px
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right .dc-smarter-roi--play-video {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right .dc-smarter-roi--partners {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 2;
        padding: 20px
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right .dc-smarter-roi--partners .dc-smarter-roi--s-introduction--headline {
        color: #fff;
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right .dc-smarter-roi--partners .dc-smarter-roi--partners-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px
    }

    .dc-smarter-roi--introduction .dc-smarter-roi--section-right .dc-smarter-roi--partners .dc-smarter-roi--partners-row .dc-smarter-roi--s-introduction--logo {
        width: 140px;
        object-fit: contain
    }

    @media (max-width: 1120px) {
        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row {
            height: auto;
            overflow-y: auto;
            flex-direction: column
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left {
            background-image: url(../media/start/intro.jpeg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            justify-content: space-between;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            position: relative
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, #000c 30%, #0000);
            z-index: 1
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--responsive-header {
            padding: 20px;
            background: var(--color-background);
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            z-index: 2
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--responsive-header .dc-smarter-roi--s-introduction--logo {
            height: 55px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container {
            padding: 20px;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 2
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--s-introduction--logo {
            display: none
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--target-group {
            font-size: 14px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--s-introduction--headline {
            font-size: 32px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--s-introduction--description {
            font-size: 20px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--button-description {
            font-size: 14px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--button-row {
            justify-content: center;
            align-items: center;
            gap: 16px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--button-row .dc-smarter-roi--video-button {
            display: block
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--responsive-partners {
            display: block;
            margin-top: 32px
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--responsive-partners .dc-smarter-roi--s-introduction--headline {
            color: #fff;
            font-family: Montserrat;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 125%
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--responsive-partners .dc-smarter-roi--partners-row {
            margin-top: 16px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--text-container .dc-smarter-roi--responsive-partners .dc-smarter-roi--partners-row .dc-smarter-roi--s-introduction--logo {
            width: 120px;
            height: auto;
            object-fit: contain;
            filter: grayscale(100%);
            display: block;
            margin-bottom: 0
        }

        .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-left .dc-smarter-roi--partners, .dc-smarter-roi--introduction .dc-smarter-roi--introduction-row .dc-smarter-roi--section-right {
            display: none
        }
    }

    .dc-smarter-roi--role-selection {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 16px
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--navbar {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 16px;
        margin-bottom: 48px
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--navbar .dc-smarter-roi--s-role-selection--logo {
        height: 55px;
        width: auto
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--s-role-selection--headline {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--s-role-selection--description {
        margin-top: 16px;
        margin-bottom: 24px;
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 125%
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles {
        margin-top: 32px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 16px
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles .dc-smarter-roi--role {
        background: var(--s-c-bg-secondary);
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles .dc-smarter-roi--role .dc-smarter-roi--image-wrapper {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 16px
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles .dc-smarter-roi--role .dc-smarter-roi--role-image {
        flex-grow: 1;
        width: 100%;
        height: auto;
        border-radius: 5px;
        max-width: 200px
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles .dc-smarter-roi--role .dc-smarter-roi--role-title {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        margin-bottom: 8px
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles .dc-smarter-roi--role .dc-smarter-roi--role-description {
        color: #cbcbcb;
        text-align: center;
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%
    }

    .dc-smarter-roi--role-selection .dc-smarter-roi--roles .dc-smarter-roi--role .dc-smarter-roi--role-button {
        margin-top: 16px;
        align-self: flex-end
    }

    @media (max-width: 1120px) {
        .dc-smarter-roi--s-role-selection--headline {
            font-size: 32px !important
        }

        .dc-smarter-roi--s-role-selection--description {
            font-size: 20px !important
        }

        .dc-smarter-roi--roles {
            flex-direction: column !important;
            align-items: center
        }

        .dc-smarter-roi--roles .dc-smarter-roi--role {
            width: 100%
        }
    }

    .dc-smarter-roi--end-result-numbers {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px
    }

    .dc-smarter-roi--end-result-numbers .dc-smarter-roi--number-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .dc-smarter-roi--end-result-numbers .dc-smarter-roi--number-wrapper .dc-smarter-roi--s-end-result-numbers--description {
        font-size: 16px;
        color: var(--s-c-secondary);
        margin-bottom: 2px
    }

    .dc-smarter-roi--end-result-numbers .dc-smarter-roi--number-wrapper .dc-smarter-roi--ern-result {
        font-size: 32px;
        font-weight: 700;
        color: var(--s-c-secondary);
        line-height: 1.2
    }

    @media (max-width: 1180px) {
        .dc-smarter-roi--end-result-numbers .dc-smarter-roi--number-wrapper .dc-smarter-roi--s-end-result-numbers--description {
            font-size: 14px
        }

        .dc-smarter-roi--end-result-numbers .dc-smarter-roi--number-wrapper .dc-smarter-roi--ern-result {
            font-size: 24px
        }
    }

    .dc-smarter-roi--loading {
        height: 128px;
        width: 128px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin: 0 auto
    }

    .dc-smarter-roi--dot {
        height: 32px;
        width: 32px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        animation: bounce .5s infinite alternate
    }

    .dc-smarter-roi--dot:nth-child(2) {
        animation-delay: .1s
    }

    .dc-smarter-roi--dot:nth-child(3) {
        animation-delay: .2s
    }

    @keyframes bounce {
        0% {
            transform: translateY(0)
        }
        to {
            transform: translateY(-32px)
        }
    }

    .dc-smarter-roi--contact-form {
        background-color: var(--s-c-dark-soft-2);
        padding: 32px;
        border-radius: 16px;
        max-width: 450px;
        width: 100%;
        z-index: 1;
        transition: height .3s ease
    }

    .dc-smarter-roi--contact-form.dc-smarter-roi--full-width {
        width: 100%;
        max-width: none
    }

    .dc-smarter-roi--contact-form.dc-smarter-roi--no-padding {
        padding: 0
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start;
        align-items: flex-end
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group label {
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group input, .dc-smarter-roi--contact-form .dc-smarter-roi--form-group textarea {
        padding: 16px 8px;
        border: 2px solid transparent;
        border-radius: 5px;
        font-family: Montserrat, sans-serif;
        font-size: 16px
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group input:focus {
        outline: none;
        border: 2px solid var(--s-c-primary)
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group input {
        background-color: var(--s-c-dark-soft);
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group textarea {
        background-color: var(--s-c-dark-soft);
        color: var(--s-c-secondary);
        resize: none;
        height: 100px
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--form-group textarea:focus {
        outline: none;
        border: 2px solid var(--s-c-primary)
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--dsgvo {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        width: 100%
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--dsgvo input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border: 2px solid var(--s-c-secondary);
        border-radius: 4px;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        outline: none;
        transition: all .3s ease;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--dsgvo input[type=checkbox]:checked {
        background-color: var(--s-c-secondary)
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--dsgvo input[type=checkbox]:checked:after {
        content: "✔";
        color: var(--s-c-primary);
        font-size: 16px;
        position: absolute;
        top: 0;
        left: 4px;
        transform: scale(1);
        transition: all .3s ease;
        background-color: transparent
    }

    .dc-smarter-roi--contact-form .dc-smarter-roi--dsgvo label {
        color: var(--s-c-secondary)
    }

    .dc-smarter-roi--s-contact-form--button {
        margin-top: 16px
    }

    .dc-smarter-roi--s-contact-form--title {
        font-size: 24px;
        color: var(--s-c-secondary);
        margin-bottom: 16px;
        text-align: center
    }

    .dc-smarter-roi--loading {
        margin-top: 64px
    }

    .sr-only {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0
    }

    a {
        color: var(--s-c-primary);
        text-decoration: underline
    }

    a:hover {
        color: var(--s-c-primary-hover)
    }

    .dc-smarter-roi--end-result {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 32px 16px 16px 32px;
        background: --s-c-bg-primary;
        border-radius: 16px;
        width: 100%;
        background: var(--s-c-bg-primary)
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--calculation-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--s-end-result--description {
        font-size: 20px;
        color: var(--s-c-secondary);
        text-align: start;
        margin-bottom: 8px
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--s-end-result--headline {
        font-size: 48px;
        font-weight: 700;
        color: var(--s-c-secondary);
        text-align: start;
        margin-bottom: 16px;
        line-height: 125%
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--end-results-numbers-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--actions-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: 32px;
        width: 100%;
        gap: 12px
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--actions-wrapper .dc-smarter-roi--marketing-spot {
        background: var(--s-c-dark-soft-2);
        width: 100%;
        border-radius: 10px;
        overflow: hidden
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--actions-wrapper .dc-smarter-roi--marketing-spot img {
        width: 100%
    }

    .dc-smarter-roi--end-result .dc-smarter-roi--actions-wrapper .dc-smarter-roi--marketing-spot .dc-smarter-roi--btn {
        padding: 8px 16px 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    @media (max-width: 1180px) {
        .dc-smarter-roi--end-result {
            border-radius: 0 0 20px 20px
        }

        .dc-smarter-roi--end-result .dc-smarter-roi--calculation-wrapper {
            width: 100%;
            justify-content: flex-end
        }

        .dc-smarter-roi--end-result .dc-smarter-roi--calculation-wrapper .dc-smarter-roi--s-end-result--headline {
            font-size: 32px;
            margin-bottom: 32px
        }

        .dc-smarter-roi--end-result .dc-smarter-roi--calculation-wrapper .dc-smarter-roi--s-end-result--description {
            font-size: 16px
        }
    }

    .dc-smarter-roi--calculator {
        background: var(--s-c-bg-secondary);
        border-radius: 16px;
        box-shadow: 0 0 20px #ffffff40;
        width: 100%
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 16px 32px;
        gap: 24px;
        border-bottom: 1px solid var(--s-c-border)
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input-wrapper {
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: flex-start
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input-wrapper .dc-smarter-roi--label {
        color: var(--s-c-grey);
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        line-height: 150%
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input-wrapper .dc-smarter-roi--total {
        color: var(--s-c-primary);
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input-wrapper .dc-smarter-roi--rack-total {
        margin-top: 4px
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input {
        width: 200px;
        padding: 12px;
        border: 1px solid var(--s-c-border);
        border-radius: 8px;
        font-size: 20px;
        color: var(--s-c-secondary);
        background-color: var(--s-c-bg-primary)
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input:focus {
        outline: none;
        border: 2px solid var(--s-c-primary)
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input::-webkit-inner-spin-button, .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input[type=number] {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input.dc-smarter-roi--readonly-display {
        cursor: default;
        opacity: .6;
        width: 200px
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input.dc-smarter-roi--readonly-display:focus {
        outline: none;
        border: 1px solid var(--s-c-border)
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--inputfields .dc-smarter-roi--input.dc-smarter-roi--select {
        width: max-content;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
        margin-top: 0
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--s-c-border);
        height: 120px;
        padding: 0 16px
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item:last-child {
        border-bottom: none;
        margin-bottom: 0
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--meta {
        width: 40%;
        padding: 16px;
        text-align: left
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--meta .dc-smarter-roi--s-calculator--title {
        color: var(--s-c-secondary);
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        margin-bottom: 8px;
        text-align: left
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--meta .dc-smarter-roi--description {
        color: var(--s-c-secondary-soft);
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--slider-wrapper-x {
        width: 40%;
        padding: 16px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result {
        width: 20%;
        padding: 16px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        border-left: 1px solid var(--s-c-border)
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result .dc-smarter-roi--result-input {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid transparent;
        color: var(--s-c-secondary);
        font-size: 20px;
        font-weight: 700;
        font-family: Montserrat;
        text-align: right;
        padding: 4px 0;
        line-height: 125%;
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result .dc-smarter-roi--result-input::-webkit-inner-spin-button, .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result .dc-smarter-roi--result-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result .dc-smarter-roi--result-input:focus {
        outline: none;
        border-bottom-color: var(--s-c-primary)
    }

    .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result .dc-smarter-roi--suffix {
        color: var(--s-c-secondary);
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap
    }

    @media (max-width: 1180px) {
        .dc-smarter-roi--calculator .dc-smarter-roi--item {
            flex-direction: column;
            align-items: flex-start;
            height: auto;
            padding: 16px
        }

        .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--meta, .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--slider-wrapper-x {
            width: 100%
        }

        .dc-smarter-roi--calculator .dc-smarter-roi--item .dc-smarter-roi--result {
            display: none
        }
    }

    @media (max-width: 520px) {
        .dc-smarter-roi--inputfields {
            flex-direction: column !important;
            padding: 16px;
            gap: 8px
        }

        .dc-smarter-roi--inputfields .dc-smarter-roi--input-wrapper {
            width: 100%
        }

        .dc-smarter-roi--inputfields .dc-smarter-roi--input-wrapper .dc-smarter-roi--input {
            width: 100%;
            max-width: 350px
        }
    }

    .dc-smarter-roi--result {
        height: 100%;
        padding: 32px
    }

    .dc-smarter-roi--result .dc-smarter-roi--numbers {
        position: relative;
        width: 100%;
        margin-top: -64px;
        height: max-content
    }

    .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--calc {
        z-index: 5;
        left: 0;
        right: 32px;
        width: calc(66% + 16px);
        position: absolute
    }

    .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--end-result-x {
        position: absolute;
        z-index: 4;
        top: -64px;
        right: 0;
        width: 34%
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper {
        padding-top: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        background-image: url(../media/outro/st.png);
        background-size: cover;
        overflow: hidden;
        width: 100%;
        border-radius: 16px;
        padding-bottom: 128px;
        position: relative
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(137deg, #4095bbb3, #1f759cb3);
        z-index: 1
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--back-button {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 3;
        width: calc(100% - 32px);
        display: flex;
        justify-content: flex-start
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--header {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 2
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--logo {
        max-width: 150px
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--headline {
        font-size: 48px;
        font-weight: 600;
        margin-top: 32px;
        color: var(--s-c-secondary);
        line-height: 1.25
    }

    .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--description {
        font-size: 24px;
        font-weight: 500;
        margin-top: 16px;
        color: var(--s-c-secondary);
        line-height: 1.5;
        max-width: 600px;
        margin-bottom: 16px
    }

    @media (max-width: 1180px) {
        .dc-smarter-roi--result {
            padding: 0
        }

        .dc-smarter-roi--result .dc-smarter-roi--partners-x, .dc-smarter-roi--result .dc-smarter-roi--contact-x {
            padding: 0 16px
        }

        .dc-smarter-roi--result .dc-smarter-roi--numbers {
            position: relative;
            width: calc(100% - 32px);
            margin-top: -64px;
            height: max-content;
            left: 16px
        }

        .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--calc {
            position: relative;
            width: 100%;
            top: 0;
            left: 0;
            right: 0;
            margin-top: -32px
        }

        .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--end-result-x {
            position: relative;
            z-index: 4;
            left: 50%;
            margin-top: -16px;
            right: 0;
            top: 0;
            transform: translate(-50%);
            width: 100%;
            max-width: 500px;
            box-shadow: none;
            justify-content: space-between
        }

        .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--header-wrapper {
            padding-top: 32px;
            padding-bottom: 16px
        }

        .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--headline {
            font-size: 32px !important
        }

        .dc-smarter-roi--result .dc-smarter-roi--numbers .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--description {
            font-size: 16px
        }

        .dc-smarter-roi--result .dc-smarter-roi--header-wrapper {
            border-radius: 0
        }

        .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--headline {
            font-size: 32px !important
        }

        .dc-smarter-roi--result .dc-smarter-roi--header-wrapper .dc-smarter-roi--header .dc-smarter-roi--s-result--description {
            font-size: 16px
        }
    }

    .dc-smarter-roi--st-outro {
        padding: 32px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper {
        padding-bottom: 64px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-image: url(../media/outro/st.png);
        background-size: cover;
        overflow: hidden;
        height: 100%;
        width: 100%;
        border-radius: 16px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(137deg, #4095bbb3, #1f759cb3);
        z-index: 1
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--appointment {
        margin-top: 16px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--back-button {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 3;
        width: calc(100% - 32px);
        display: flex;
        justify-content: flex-start
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding: 32px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--logo {
        max-width: 150px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--headline {
        font-size: 48px;
        font-weight: 600;
        margin-top: 32px;
        color: var(--s-c-secondary);
        line-height: 1.25
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--description {
        font-size: 24px;
        font-weight: 500;
        margin-top: 16px;
        color: var(--s-c-secondary);
        line-height: 1.5;
        max-width: 600px;
        margin-bottom: 16px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper {
        position: relative;
        width: 100%;
        height: max-content;
        margin-top: -32px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper .dc-smarter-roi--benefits {
        box-shadow: 0 0 20px #ffffff40;
        left: 50%;
        right: 0;
        transform: translate(-50%);
        border-radius: 16px;
        position: absolute;
        z-index: 100;
        width: calc(100% - 32px);
        max-width: 800px;
        background: var(--s-c-bg-secondary);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper .dc-smarter-roi--benefits .dc-smarter-roi--s-st-outro--headline {
        font-size: 24px;
        font-weight: 600;
        color: var(--s-c-secondary);
        text-align: center;
        width: 100%;
        padding: 32px
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper .dc-smarter-roi--benefits .dc-smarter-roi--benefit {
        padding: 32px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
        border-top: 1px solid var(--s-c-border);
        width: 100%
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper .dc-smarter-roi--benefits .dc-smarter-roi--benefit .dc-smarter-roi--s-st-outro--text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper .dc-smarter-roi--benefits .dc-smarter-roi--benefit .dc-smarter-roi--s-st-outro--text-wrapper .dc-smarter-roi--s-st-outro--title {
        font-size: 16px;
        font-weight: 500;
        color: var(--s-c-secondary);
        text-align: left
    }

    .dc-smarter-roi--st-outro .dc-smarter-roi--benefits-wrapper .dc-smarter-roi--benefits .dc-smarter-roi--benefit .dc-smarter-roi--s-st-outro--text-wrapper .dc-smarter-roi--s-st-outro--description {
        font-size: 24px;
        color: var(--s-c-secondary);
        font-weight: 700
    }

    @media (max-width: 1120px) {
        .dc-smarter-roi--st-outro {
            padding: 0
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper {
            border-radius: 0
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--headline {
            font-size: 32px
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--description, .dc-smarter-roi--st-outro .dc-smarter-roi--benefits .dc-smarter-roi--s-st-outro--headline {
            font-size: 20px
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--benefits .dc-smarter-roi--benefit .dc-smarter-roi--s-st-outro--text-wrapper .dc-smarter-roi--s-st-outro--title {
            font-size: 14px;
            text-align: left
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--benefits .dc-smarter-roi--benefit .dc-smarter-roi--s-st-outro--text-wrapper .dc-smarter-roi--s-st-outro--description {
            font-size: 20px
        }
    }

    @media (max-width: 500px) {
        .dc-smarter-roi--st-outro {
            padding: 0
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper {
            border-radius: 0
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--headline {
            font-size: 24px
        }

        .dc-smarter-roi--st-outro .dc-smarter-roi--content-wrapper .dc-smarter-roi--s-st-outro--content .dc-smarter-roi--s-st-outro--description {
            font-size: 16px
        }
    }

    main {
        position: relative;
        height: 100%;
        width: 100% !important;
        flex: 1;
        max-width: 1500px;
        margin: auto
    }

    main .dc-smarter-roi--simulation {
        position: relative
    }

    main .dc-smarter-roi--slide-container {
        position: relative;
        height: auto;
        transition: height .5s ease
    }

    main .dc-smarter-roi--slide-wrapper {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%
    }

    main .dc-smarter-roi--slide-wrapper.dc-smarter-roi--active {
        opacity: 1;
        pointer-events: auto;
        left: 0
    }

    main .hubspot-form iframe {
        margin-bottom: 100px;
    }
}

#app #hubspot-form {
    margin-bottom: 100px;
}