html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * Keep the three saving statements and their matching value cards in shared
 * grid rows. Separate column wrappers cannot keep corresponding items aligned
 * when text wraps differently at intermediate widths, so they participate in
 * the parent grid through display: contents.
 */
.fifth-screen .fifth-screen__container {
    grid-template-rows: repeat(3, auto);
    row-gap: 16px;
    align-items: stretch;
}

.fifth-screen .fifth-screen__left,
.fifth-screen .fifth-screen__right {
    display: contents;
}

.fifth-screen .fifth-screen__left > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.fifth-screen .fifth-screen__left > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.fifth-screen .fifth-screen__left > :nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.fifth-screen .fifth-screen__right > :nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}

.fifth-screen .fifth-screen__right > :nth-child(2) {
    grid-column: 2;
    grid-row: 2;
}

.fifth-screen .fifth-screen__right > :nth-child(3) {
    grid-column: 2;
    grid-row: 3;
}

.fifth-screen .fifth-screen__item,
.fifth-screen .fifth-screen__card {
    min-width: 0;
    height: 100%;
}

.fifth-screen .fifth-screen__item {
    align-items: center;
}

/* Laptop */
@media (max-width: 1199px) {
    .first-screen > .content,
    .second-screen > .content,
    .third-screen > .content,
    .fourth-screen > .content,
    .fifth-screen > .content,
    .sixth-screen > .content,
    .seventh-screen > .content,
    .id-code-test > .content {
        width: min(920px, calc(100% - 48px));
        max-width: none;
        margin-right: auto;
        margin-left: auto;
    }

    .first-screen {
        padding-top: 145px;
    }

    .first-screen .first-screen__main {
        width: min(860px, 100%);
    }

    .first-screen .first-screen__text {
        width: min(682px, calc(100% - 150px));
    }

    .first-screen .first-screen__image-wrapper {
        flex: 0 0 160px;
        width: 160px;
        margin-left: -105px;
    }

    .first-screen .first-screen__image {
        width: 160px;
    }

    .first-screen .first-screen__cards,
    .sixth-screen .sixth-screen__table-wrapper,
    .sixth-screen .sixth-screen__payback-cards {
        width: 100%;
    }

    .third-screen .third-screen__title,
    .fourth-screen .fourth-screen__title,
    .fifth-screen .fifth-screen__title {
        font-size: 52px;
    }

    .fifth-screen__title .cascade {
        font-size: 66px;
    }

    .third-screen .third-screen__cards {
        gap: 0 12px;
    }

    .third-screen .third-screen__top,
    .third-screen .third-screen__bottom {
        padding-right: 16px;
        padding-left: 16px;
    }

    .sixth-screen .sixth-screen__table {
        grid-template-columns: 220px repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 991px) {
    .first-screen > .content,
    .second-screen > .content,
    .third-screen > .content,
    .fourth-screen > .content,
    .fifth-screen > .content,
    .sixth-screen > .content,
    .seventh-screen > .content,
    .id-code-test > .content {
        width: min(720px, calc(100% - 40px));
    }

    .first-screen {
        padding-top: 135px;
        padding-bottom: 56px;
    }

    .first-screen .first-screen__main {
        align-items: flex-start;
    }

    .first-screen .first-screen__text {
        width: calc(100% - 145px);
    }

    .first-screen .first-screen__title {
        font-size: 36px;
        line-height: 1.02;
    }

    .first-screen .first-screen__description {
        width: min(450px, 100%);
    }

    .first-screen .first-screen__image-wrapper {
        flex-basis: 150px;
        width: 150px;
        margin-top: 54px;
        margin-left: -72px;
    }

    .first-screen .first-screen__image {
        width: 150px;
    }

    .first-screen .first-screen__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .first-screen .first-screen__card {
        min-height: 124px;
    }

    .second-screen .second-screen__title,
    .third-screen .third-screen__title,
    .fourth-screen .fourth-screen__title,
    .fifth-screen .fifth-screen__title,
    .sixth-screen .sixth-screen__title,
    .seventh-screen .seventh-screen__title {
        font-size: 48px;
        line-height: 1;
    }

    .second-screen__title .cascade,
    .fifth-screen__title .cascade {
        font-size: inherit;
    }

    .second-screen .second-screen__problems,
    .fourth-screen .fourth-screen__results {
        width: min(650px, 100%);
    }

    .second-screen .second-screen__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .third-screen .third-screen__description {
        font-size: 19px;
    }

    .third-screen .third-screen__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
    }

    .third-screen .third-screen__plus {
        display: none;
    }

    .third-screen .third-screen__card {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .third-screen .third-screen__top,
    .third-screen .third-screen__bottom {
        min-height: 0;
    }

    .third-screen .third-screen__top {
        flex: 1 1 auto;
    }

    .third-screen .third-screen__bottom {
        flex: 1 1 auto;
    }

    .fourth-screen .fourth-screen__cards {
        gap: 14px;
    }

    .fourth-screen .fourth-screen__card {
        padding: 18px 20px;
    }

    .fourth-screen .fourth-screen__card p {
        font-size: 17px;
    }

    .fifth-screen .fifth-screen__container {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
        column-gap: 28px;
    }

    .fifth-screen .fifth-screen__left {
        gap: 28px;
    }

    .sixth-screen .sixth-screen__table-wrapper {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sixth-screen .sixth-screen__table {
        min-width: 820px;
    }

    .sixth-screen .sixth-screen__payback-cards {
        gap: 10px;
    }

    .sixth-screen .sixth-screen__payback-card {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* Phone */
@media (max-width: 767px) {
    .first-screen > .content,
    .second-screen > .content,
    .third-screen > .content,
    .fourth-screen > .content,
    .fifth-screen > .content,
    .sixth-screen > .content,
    .seventh-screen > .content,
    .id-code-test > .content {
        width: calc(100% - 32px);
    }

    .first-screen {
        padding-top: 130px;
        padding-bottom: 44px;
    }

    .second-screen,
    .third-screen,
    .fourth-screen,
    .fifth-screen,
    .sixth-screen,
    .seventh-screen {
        padding-top: 44px;
        padding-bottom: 48px;
    }

    .first-screen .first-screen__main {
        flex-direction: column;
        align-items: stretch;
    }

    .first-screen .first-screen__text {
        display: contents;
        width: 100%;
    }

    .first-screen .first-screen__title {
        order: 1;
        margin-bottom: 22px;
        font-size: clamp(31px, 8.6vw, 42px);
        line-height: 1.02;
        text-wrap: pretty;
    }

    .first-screen .first-screen__title br {
        display: none;
    }

    .first-screen .first-screen__description {
        order: 2;
        width: 100%;
        margin-bottom: 22px;
        padding: 16px 18px;
        font-size: 16px;
    }

    .first-screen .first-screen__image-wrapper {
        order: 3;
        width: 100%;
        margin: 0 0 24px;
    }

    .first-screen .first-screen__image {
        width: min(210px, 62vw);
    }

    .first-screen .first-screen__buttons {
        order: 4;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 12px;
    }

    .first-screen .first-screen__button,
    .first-screen .first-screen__button--primary,
    .first-screen .first-screen__button--secondary {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 50px;
        padding: 10px 12px;
        text-align: center;
    }

    .first-screen .first-screen__cards {
        margin-top: 32px;
        gap: 12px;
    }

    .first-screen .first-screen__card {
        min-height: 118px;
        padding: 15px 16px 18px;
    }

    .first-screen .first-screen__card-number {
        margin-bottom: 12px;
        font-size: 34px;
    }

    .first-screen .first-screen__card-text {
        font-size: 18px;
    }

    .second-screen .second-screen__subtitle,
    .third-screen .third-screen__subtitle,
    .fourth-screen .fourth-screen__subtitle,
    .sixth-screen .sixth-screen__subtitle,
    .seventh-screen .seventh-screen__subtitle {
        margin-bottom: 16px;
        font-size: 13px;
        line-height: 1.3;
    }

    .second-screen .second-screen__title,
    .third-screen .third-screen__title,
    .fourth-screen .fourth-screen__title,
    .fifth-screen .fifth-screen__title,
    .sixth-screen .sixth-screen__title,
    .seventh-screen .seventh-screen__title {
        font-size: clamp(34px, 9.5vw, 46px);
        line-height: 1.02;
    }

    .second-screen .second-screen__title br,
    .third-screen .third-screen__title br,
    .fourth-screen .fourth-screen__title br,
    .fifth-screen .fifth-screen__title br {
        display: none;
    }

    .second-screen .second-screen__problems {
        margin-bottom: 34px;
        gap: 16px;
    }

    .second-screen .second-screen__problem {
        gap: 14px;
    }

    .second-screen .second-screen__problem img {
        width: 34px;
    }

    .second-screen .second-screen__problem p,
    .fourth-screen .fourth-screen__result p,
    .fifth-screen .fifth-screen__item p {
        font-size: 16px;
    }

    .second-screen .second-screen__card {
        min-height: 0;
    }

    .third-screen .third-screen__description {
        margin-bottom: 30px;
        font-size: 17px;
    }

    .third-screen .third-screen__description br {
        display: none;
    }

    .third-screen .third-screen__cards {
        grid-template-columns: 1fr;
    }

    .third-screen .third-screen__top,
    .third-screen .third-screen__bottom {
        padding: 18px;
    }

    .third-screen .third-screen__top h5,
    .third-screen .third-screen__bottom h5 {
        margin-bottom: 12px;
        font-size: 20px;
    }

    .third-screen .third-screen__buttons {
        margin-top: 26px;
    }

    .third-screen .third-screen__button {
        width: min(100%, 300px);
    }

    .fourth-screen .fourth-screen__title {
        margin-bottom: 30px;
    }

    .fourth-screen .fourth-screen__results {
        margin-bottom: 30px;
        gap: 16px;
    }

    .fourth-screen .fourth-screen__result {
        gap: 14px;
    }

    .fourth-screen .fourth-screen__result img {
        width: 30px;
    }

    .fourth-screen .fourth-screen__bonus-title {
        margin: 30px 0 22px;
        font-size: 42px;
    }

    .fourth-screen .fourth-screen__cards {
        grid-template-columns: 1fr;
    }

    .fourth-screen .fourth-screen__card {
        min-height: 0;
    }

    .fifth-screen .fifth-screen__container {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 48%);
        column-gap: 18px;
    }

    .fifth-screen .fifth-screen__left {
        gap: 22px;
    }

    .fifth-screen .fifth-screen__item {
        gap: 14px;
    }

    .fifth-screen .fifth-screen__item img {
        width: 30px;
    }

    .sixth-screen .sixth-screen__title {
        margin-bottom: 28px;
    }

    .sixth-screen .sixth-screen__table-wrapper {
        margin-right: calc((100vw - 100%) / -2);
        margin-left: calc((100vw - 100%) / -2);
        width: 100vw;
        border-radius: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    .sixth-screen .sixth-screen__table {
        min-width: 760px;
    }

    .sixth-screen .sixth-screen__header {
        min-height: 174px;
        padding: 20px 14px;
    }

    .sixth-screen .sixth-screen__feature {
        padding-right: 14px;
        padding-left: 14px;
    }

    .sixth-screen .sixth-screen__payback {
        margin-top: 42px;
    }

    .sixth-screen .sixth-screen__payback-title {
        margin-bottom: 26px;
        font-size: 40px;
    }

    .sixth-screen .sixth-screen__payback-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sixth-screen .sixth-screen__payback-card {
        min-height: 0;
    }

    .sixth-screen .sixth-screen__payback-number {
        margin-bottom: 12px;
    }

    .sixth-screen .sixth-screen__payback-description {
        font-size: 17px;
    }

    .sixth-screen .sixth-screen__payback-description br {
        display: none;
    }

    .seventh-screen .seventh-screen__question {
        gap: 14px;
        font-size: 18px;
    }

    .seventh-screen .seventh-screen__answer-inner {
        font-size: 15px;
        line-height: 1.45;
        padding-right: 10px;
    }

    .id-code-test {
        padding: 30px 0;
        background: #eee7da;
        color: var(--color-header);
        font: 700 18px/1.3 var(--font-secondary);
        text-align: center;
    }
}

@media (max-width: 599px) {
    .first-screen .first-screen__cards,
    .second-screen .second-screen__cards {
        grid-template-columns: 1fr;
    }

    .first-screen .first-screen__card {
        min-height: 0;
    }

    .fifth-screen .fifth-screen__container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        gap: 12px;
    }

    .fifth-screen .fifth-screen__left > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .fifth-screen .fifth-screen__right > :nth-child(1) {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 16px;
    }

    .fifth-screen .fifth-screen__left > :nth-child(2) {
        grid-column: 1;
        grid-row: 3;
    }

    .fifth-screen .fifth-screen__right > :nth-child(2) {
        grid-column: 1;
        grid-row: 4;
        margin-bottom: 16px;
    }

    .fifth-screen .fifth-screen__left > :nth-child(3) {
        grid-column: 1;
        grid-row: 5;
    }

    .fifth-screen .fifth-screen__right > :nth-child(3) {
        grid-column: 1;
        grid-row: 6;
    }
}

/* Small phone */
@media (max-width: 479px) {
    .first-screen > .content,
    .second-screen > .content,
    .third-screen > .content,
    .fourth-screen > .content,
    .fifth-screen > .content,
    .sixth-screen > .content,
    .seventh-screen > .content,
    .id-code-test > .content {
        width: calc(100% - 24px);
    }

    .first-screen {
        padding-top: 126px;
    }

    .first-screen .first-screen__title,
    .second-screen .second-screen__title,
    .third-screen .third-screen__title,
    .fourth-screen .fourth-screen__title,
    .fifth-screen .fifth-screen__title,
    .sixth-screen .sixth-screen__title,
    .seventh-screen .seventh-screen__title {
        font-size: clamp(29px, 9.6vw, 38px);
    }

    .first-screen .first-screen__buttons {
        grid-template-columns: 1fr;
    }

    .first-screen .first-screen__button {
        min-height: 48px;
    }

    .first-screen .first-screen__image {
        width: min(190px, 68vw);
    }

    .second-screen .second-screen__problem,
    .fourth-screen .fourth-screen__result,
    .fifth-screen .fifth-screen__item {
        gap: 11px;
    }

    .second-screen .second-screen__problem img,
    .fourth-screen .fourth-screen__result img,
    .fifth-screen .fifth-screen__item img {
        width: 27px;
    }

    .third-screen .third-screen__top p,
    .third-screen .third-screen__bottom p {
        font-size: 15px;
    }

    .fourth-screen .fourth-screen__card {
        padding: 16px;
    }

    .fifth-screen .fifth-screen__card {
        padding: 14px 15px;
    }

    .sixth-screen .sixth-screen__payback-title {
        font-size: 34px;
    }

    .seventh-screen .seventh-screen__question {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
@media (max-width: 680px) {
    .meeting-popup {
        padding: 14px;
    }

    .meeting-popup-dialog {
        max-height: calc(100vh - 28px);
        padding: 54px 20px 20px;
    }

    .meeting-popup-heading {
        width: auto;
        max-width: none;
        margin: -44px 42px 24px 0;
        padding: 10px 12px;
    }

    .meeting-popup-heading h2 {
        font-size: clamp(19px, 5.8vw, 24px);
        white-space: normal;
    }

    .meeting-popup-heading p {
        margin: 5px 0 0;
        font-size: 12px;
    }

    .meeting-popup-form,
    .meeting-popup-captcha {
        width: 100%;
        margin-left: 0;
    }

    .meeting-popup-policy {
        white-space: normal;
    }
}

@media (max-width: 380px) {
    .meeting-popup-dialog {
        padding-right: 14px;
        padding-left: 14px;
    }

    .meeting-popup-close {
        top: 12px;
        right: 12px;
    }
}