@media (min-width:1400px) {
    .step {
        max-width: 330px;
    }
}

@media (min-width: 1200px) and (max-width: 1550px) {

    .hero-line1,
    .hero-line2,
    .hero-line3 {
        font-size: 65px;
    }
}

@media (min-width: 1024.1px) and (max-width: 1200px) {
    .btn-1 {
        padding: 9px 20px;
        font-size: 18px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        text-align: left;
    }

    .hero__grid>div:first-child {
        max-width: 100%;
        order: 1;
    }

    .hero__media {
        order: 2;
        justify-content: flex-end;
        margin-right: calc(-50vw + 100%);
    }

    .browser {
        max-width: 380px;
        border-radius: 10px 0 0 10px;
    }

    .hero__list {
        justify-content: flex-start;
    }

    .hero__list li {
        text-align: left;
    }

    .header-logo img {
        max-width: 240px;
        transform: scale(0.95);
    }

    .hero-line1,
    .hero-line2,
    .hero-line3 {
        font-family: var(--display);
        font-weight: 800;
        font-style: normal;
        font-size: 55px;
        line-height: 1.1;
    }

    .btn-1 {
        padding: 9px 20px;
    }

    .cred__in {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .cred__in div {
        font-size: 14px;
    }

    .check-list li {
        font-size: 13px;
        padding-left: 28px;
        white-space: wrap;
        line-height: 22px;
    }

    #scrollToTop {
        width: 44px;
        height: 44px;
        right: 20px;
        bottom: 20px;
    }

    #scrollToTop i {
        font-size: 16px;
    }

    #scrollToTop .progress-ring {
        width: 44px;
        height: 44px;
    }

    .hc-toast-container {
        top: 100px;
        right: 16px;
        left: 16px;
        align-items: flex-end;
    }

    .bg-blur-decor {
        position: absolute;
        top: 40%;
    }

    .field input[type="text"],
    .field input[type="email"],
    .field input[type="tel"],
    .field input[type="file"],
    .field select,
    .field textarea {
        width: 100%;
        max-height: 46px;
        height: 46px;
    }

    .file-upload {
        height: 46px;
    }
    .file-upload__btn {
        flex-shrink: 0;
        height: 37px;
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
    }
}

@media (max-width: 767.9px) {

    .field input[type="text"],
    .field input[type="email"],
    .field input[type="tel"],
    .field input[type="file"],
    .field select,
    .field textarea {
        width: 100%;
        max-height: 46px;
        height: 46px;
    }

    .file-upload {
        height: 46px;
    }

    .file-upload__btn {
        flex-shrink: 0;
        height: 37px;
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
    }

    .hc-toast-container {
        top: 100px;
        right: 16px;
        left: 16px;
        align-items: flex-end;
    }

    .cred__in div {
        font-size: 14px;
    }

    .cred__in {
        flex-wrap: wrap;
        gap: 14px;
    }

    .top__right {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .header-logo img {
        max-width: 200px;
        transform: scale(0.95);
    }

    .hero__grid {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .hero__media {
        order: 2;
        width: 100%;
        margin-right: 0;
    }

    .home-banner {
        padding-top: 160px;
        padding-bottom: 40px;
    }

    .hero-line1,
    .hero-line2,
    .hero-line3 {
        line-height: 1.15;
    }

    #hero-h {
        margin-bottom: 16px;
    }

    .hero__list {
        gap: 14px 20px;
    }

    .btn-1 {
        padding: 8px 18px;
    }

    .hero-line1,
    .hero-line2,
    .hero-line3 {
        font-size: 43px;
    }

    .hero__grid {
        padding: 0 18px;
        gap: 28px;
    }

    /* One column, reading order, nothing between the items. */
    .check-list--grid {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
        row-gap: 6px;
        max-width: none;
    }

    .check-list li {
        white-space: normal;
        font-size: 15px;
    }

    #scrollToTop {
        width: 38px;
        height: 38px;
        right: 14px;
        bottom: 14px;
    }

    #scrollToTop i {
        font-size: 14px;
    }

    #scrollToTop .progress-ring {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .home-banner {
        padding-top: 150px;
        padding-bottom: 32px;
    }

    .hero__grid {
        padding: 0 18px;
        gap: 20px;
    }

    .hero-line1,
    .hero-line2,
    .hero-line3 {
        font-size: 35px;
    }

    .hero__lede,
    .lede {
        font-size: 15px;
        line-height: 1.55;
    }

    .hero__list {
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }

    .hero__list li {
        width: 100%;
    }

    .browser {
        max-width: 100%;
    }

    .proof-section::before {
        width: 300px;
        opacity: 0.9;
    }

    .proof-section::after {
        width: 250px;
        opacity: 0.9;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .reviewer-intro {
        gap: 30px;
    }

    .flowcard {
        max-width: 340px;
    }

    .reviewer-stats-inner {
        gap: 40px;
        justify-content: space-evenly;
    }
}

@media (max-width: 767px) {
    .reviewer-intro {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .reviewer-intro__media {
        justify-content: center;
        order: 2;
    }

    .reviewer-intro__text {
        order: 1;
    }

    .reviewer-intro__text .myBadge {
        margin-inline: auto;
    }


    .reviewer-stats-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        justify-items: center;
    }

    .reviewer-stat {
        align-items: center;
    }
}

@media (min-width: 576px) {
    .container-small {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-small {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-small {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-small {
        max-width: 1140px;
    }
}

@media (min-width: 1280px) {
    .container-small {
        max-width: 1210px;
    }
}
/* ---- header email: full address on desktop, icon only on mobile ----
   .top__right used to be display:none below the hamburger breakpoint, which
   would have hidden the email with it. It now stays, holding only the mail
   icon; "Before & After" and the CTA are already in the mobile menu. */
@media (max-width: 767.9px) {
    .top__right {
        display: flex;
        gap: 0;
        margin-left: auto;
        margin-right: 14px;
    }

    .top__right .top__link,
    .top__right .top__cta {
        display: none;
    }

    .top__mail-text {
        display: none;
    }

    .top__mail {
        line-height: 1;
        padding: 6px;
    }

    .top__mail i {
        font-size: 18px;
    }
}

/* Between the hamburger breakpoint and roughly a laptop the header bar is only
   930px wide; the full address crowds the CTA, so show the icon alone. */
@media (min-width: 768px) and (max-width: 1024px) {
    .top__mail-text {
        display: none;
    }

    .top__mail i {
        font-size: 17px;
    }
}

/* =========================================================
   Process diagram: swap to the stacked steps at 1024px, not 768px.
   ---------------------------------------------------------
   The caption is SVG text, so its size is user units scaled by the viewBox.
   Measured:

       1440px  svg 420px  13.00 CSS px
       1280px  svg 420px  13.00
       1100px  svg 407px  12.60
       1024px  svg 340px  10.52   <- too small
        768px  svg 321px   9.94   <- too small
        390px  svg 300px   9.29

   The two-column .reviewer-intro squeezes the card hard between 768 and
   1024, so the drawn diagram is only legible above 1024. Below that the
   stacked steps take over, with ordinary 15px HTML captions.

   display:none on the loser means exactly one of the two is in the layout
   and in the accessibility tree at any width — verified.
   ========================================================= */
@media (max-width: 1024px) {

    .flowcard {
        display: none;
    }

    .flowsteps {
        display: block;
        max-width: 340px;
        margin-inline: auto;
    }
}