@media screen and (max-width: 768px) {


.width1100 {
    width: 85% !important;
}

.image-3-row {
    margin-top: 64px !important;
}

.section4row {
    margin-top: 64px !important;
}

.faq-list {
    margin: 64px auto 0 !important;
}

.prob-item p {
    display: none !important;
}

.prob-card {
    display: none !important;
}

.stack-layer {
    display: none !important;
}

.stat-overlay {
    display: none !important;
}

.before-after-section::before,
.before-after-section::after {
    display: none !important;
}

section.padding100:has(.prob-grid) {
    padding-bottom: 40px !important;
}

section.padding100:has(+ .section-about-us) {
    padding-bottom: 40px !important;
}

.section-about-us {
    margin: 16px auto 154px !important;
}

#faq {
    padding-top: 40px !important;
}

.founder-bio {
    margin-bottom: 12px !important;
}

.founder-content {
    flex: 0 1 auto !important;
}



section.header-area.scrolled {
    width: 90%;
    top: 14px !important;
}

section.header-area.scrolled nav {
    padding: 14px 20px !important;
}


.right-book img,
.right-book video {
    height: 420px !important;
    position: unset;
    width: 82% !important;
    margin: 0 auto;
    display: block;
}

.right-book {
    position: relative;
}

.grid-bg > section:first-of-type > div:first-child > div.right-book {
    padding-bottom: 0 !important;
}

.right-book::after {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 0;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,1) 100%);
    border-radius: 0;
    pointer-events: none;
    z-index: 2;
}

.banner-btn-info {
    margin-top: -140px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    position: relative;
    z-index: 3;
}
.banner-btn-info .hero-proof {
    margin-top: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    text-align: center;
    width: fit-content !important;
    max-width: 70% !important;
}
.banner-btn-info .avatars {
    justify-content: center;
}
.proof-niche {
    display: none !important;
}
.growth-chart {
    display: none;
}
.width1100.scrolling4334 {
    padding: 0 !important;
    margin-bottom: 64px !important;
    display: block !important;
}

.width1100.scrolling4334 > div:first-child {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

.width1100.scrolling4334 > div:last-child {
    display: none !important;
}


.padding4300 {
    padding: 30px 0;
}

.grid-bg + section .padding4300 {
    padding-top: 88px !important;
}

.grid-bg + section #prod-overflow {
    padding-top: 0 !important;
}

.grid-bg + section .prod-row {
    padding-top: 0 !important;
}

.grid-bg:first-of-type::after {
    display: none !important;
}

.banner-wrapper::before {
    display: none !important;
}

#prod-overflow::before,
#prod-overflow::after {
    display: none !important;
}

.col-6.rightdie {
    margin-top: 10px;
}

.prob-panel.picture1 {
    height: 307px;
    overflow: hidden;
}
.row .col-6 {
    width: 100%;
}

.beforeaftersection {
    width: unset;
}
.image-box {
    width: 100%;
}

footer {
    width: 100% !important;
}


.image-3-row .col-4 {
    width: 100%;
    padding: 10px 0;
}
.section4row {
    display: block;
}


.beforeaftersection {
    width: unset;
}



.row43 {
    MARGIN: 20px 0 !IMPORTANT;
}



}


/* ============================================
   TABLET / IN-BETWEEN (769px - 1299px)
   Bridges the gap between the mobile layout above
   (max-width:768px) and the fixed 1100px desktop
   design. Keeps fixed-width containers from
   overflowing/clipping on tablet & small-laptop
   widths. Does NOT touch mobile or desktop rules.
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1299px) {

    .width1100,
    section.header-area.width1100px {
        width: min(92%, 1100px) !important;
    }

    section.header-area.scrolled.width1100px {
        /* logo + nav links + button need ~566px minimum to avoid wrapping;
           clamp gives a safe floor so the pill never gets squeezed into
           a near-square/circle shape at narrower tablet widths */
        width: clamp(620px, 60%, 660px) !important;
    }

    .nav-links {
        display: flex !important;
        gap: 20px !important;
    }

    .nav-links a {
        font-size: 14px !important;
    }

}

/* founder-row switches to a column layout at <=900px (its own breakpoint,
   separate from the ranges above). In column mode the flex-basis:560px
   meant as a desktop *width* leaks into becoming a fixed *height* instead -
   same bug already fixed for mobile, just needs covering here too. */
@media screen and (min-width: 769px) and (max-width: 900px) {
    .founder-content {
        flex: 0 1 auto !important;
    }
}

/* A pre-existing template breakpoint (max-width:1024px) sets .prob-card
   (the sticky video panel in "The reality check" section) to
   position:static. Its .prob-panel children rely on position:absolute
   with a positioned ancestor to stay contained to the card - without it,
   the video inside blows up to a huge, wrongly-cropped size. Rather than
   fight that interaction, just drop the panel here (same call already
   made for mobile) and keep the 4-point list, which stays perfectly
   readable and keeps the section title visible without extra scrolling. */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .prob-card {
        display: none !important;
    }
}


#prod-toggle {
    height: 35px;
    width: 35px;
}