/* Site-wide mobile layout guard.
   Desktop padding, margins and grid tracks are set inline across these pages,
   which outranks stylesheet media queries. These rules use !important so a
   phone gets a single readable column that uses the full screen width.
   Loaded on every page so fixes cannot drift between them. */

/* --- Shared header menu (sub-pages and blog) ---
   These pages have no bundled nav script, so the button toggles .show inline.
   Hidden on desktop, where the full nav links are visible instead. */
.site-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: #1a1a1a;
    padding: 0 .25rem;
}
#siteMobileMenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid #e8e6e2;
    border-radius: 0 0 0 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    z-index: 99;
}
#siteMobileMenu.show { display: block; }
#siteMobileMenu a {
    display: block;
    padding: .85rem 1.25rem;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    border-bottom: 1px solid #f0eeea;
}
#siteMobileMenu a:last-child { border-bottom: none; }
#siteMobileMenu a:hover { background: rgba(107,79,163,.06); color: #6b4fa3; }

/* --- Mobile overflow guard ---
   Rigid two-column grids and auto-fit grids whose minimum track is wider
   than a phone viewport both cause horizontal overflow. Collapse them to a
   single column on small screens so nothing pushes the page sideways. */
@media (max-width: 640px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="minmax(300px"],
    [style*="minmax(320px"],
    [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
}

/* --- Mobile padding guard ---
   Desktop padding is set inline throughout, which outranks the stylesheet's
   responsive rules. Nested section+card padding stacked to ~160px on a 375px
   screen, leaving barely half the width for text. Cap it so copy uses the
   screen. Horizontal padding matters most; vertical is trimmed to cut dead space. */
@media (max-width: 640px) {
    section { padding-left: 1rem !important; padding-right: 1rem !important; }

    [style*="padding: 4rem"], [style*="padding:4rem"],
    [style*="padding: 3rem"], [style*="padding:3rem"],
    [style*="padding: 2.5rem"], [style*="padding:2.5rem"] {
        padding: 1.5rem 1.1rem !important;
    }
    [style*="padding: 2rem"], [style*="padding:2rem"],
    [style*="padding: 1.75rem"], [style*="padding:1.75rem"] {
        padding: 1.25rem 1.05rem !important;
    }
    [style*="padding: 1.5rem"], [style*="padding:1.5rem"] {
        padding-left: 1rem !important; padding-right: 1rem !important;
    }

    /* Vertical margins stack on top of section padding, doubling the dead
       space between blocks. Trim the big ones. */
    [style*="margin: 6rem"], [style*="margin:6rem"],
    [style*="margin: 4rem 0"], [style*="margin:4rem 0"],
    [style*="margin: 3rem auto"], [style*="margin:3rem auto"] {
        margin-top: 1.5rem !important; margin-bottom: 1.5rem !important;
    }
    [style*="margin: 2.5rem 0"], [style*="margin:2.5rem 0"],
    [style*="margin: 2rem 0"], [style*="margin:2rem 0"] {
        margin-top: 1.25rem !important; margin-bottom: 1.25rem !important;
    }
    .testimonials { padding-top: 2rem !important; padding-bottom: 2rem !important; }

    /* Six steps at minmax(160px) still fit two per row on a phone, leaving
       each ~136px wide. One per row reads properly. */
    .hl-steps { grid-template-columns: 1fr !important; }
    .hl-step { text-align: left; padding-top: 1.25rem; }
    .hl-step-num { left: 1.05rem; transform: none; }

    /* Stack the floating buttons up the right edge so neither covers copy. */
    #backToTop { bottom: 5.25rem !important; right: 1rem !important; }

    /* Eight industries in a horizontal scroller showed ~2.5 with no hint the
       rest existed. Lay them out as chips so every option is visible. */
    .industry-tabs {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
        gap: .5rem !important;
        overflow-x: visible !important;
        padding: .85rem .25rem !important;
        border-top: none !important;
        border-bottom: none !important;
    }
    .industry-tab {
        white-space: normal !important;
        text-align: center;
        line-height: 1.25;
        font-size: .78rem !important;
        padding: .6rem .35rem !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px;
    }
    .industry-tab.active {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
        color: #fff !important;
    }

    /* Long words/URLs shouldn't force a horizontal scroll. */
    body { overflow-wrap: break-word; }

    /* --- Grids declared in stylesheets ---
       The selectors above only match inline style attributes. Sub-pages and blog
       articles define their grids as classes, so they need naming directly. */
    .grid, .comparison, .before-after { grid-template-columns: 1fr !important; }

    /* --- Class-declared padding wrappers ---
       Same stacking problem as the inline rules above, but declared in stylesheets
       so the attribute selectors miss them. The industry demo was the worst:
       2rem container margin + 2rem card padding left ~4 words per line. */
    .demo-container { margin: 0 .35rem !important; padding: .25rem !important; }
    .demo-before, .demo-after { padding: 1rem !important; }
    .demo-example { font-size: .88rem !important; margin-bottom: .7rem !important; }
    article { padding: 1.5rem 1rem !important; }
    .container { padding: 1rem !important; }
    .highlight, .cta { padding: 1rem !important; }

    /* Blog listing: 2rem card padding inside a 1rem container left the summary
       text on ~69% of the screen, and a 5rem hero pushed the posts below the
       fold. Tighten so each line carries more words. */
    .blog-card { padding: 1.15rem 1.1rem !important; }
    .blog-card h3 { font-size: 1.05rem !important; margin-bottom: .5rem !important; line-height: 1.3; }
    .blog-card p { margin-bottom: .6rem !important; font-size: .9rem; line-height: 1.55; }
    .grid { gap: 1rem !important; margin: 1.25rem 0 !important; }
    .hero { padding: 2.25rem 1rem !important; }
    .hero p { font-size: 1rem !important; line-height: 1.6 !important; }
    /* Sections carry 6rem margins on top of their own padding, which on a phone
       reads as a blank screen between blocks. Drop the margins and let padding
       alone set the rhythm. */
    section { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important;
              margin-top: 0 !important; margin-bottom: 0 !important; }

    /* Heading margins on these pages are sized for desktop and leave large
       empty bands between blocks on a phone. */
    .container > h1, .container > h2, article > h1, article > h2 {
        margin-top: 1.1rem !important;
        margin-bottom: .75rem !important;
    }

    /* The whole card is an <a>, so the global a:hover rule underlines every
       line in it on tap. Keep the lift, drop the underline. */
    .blog-card, .blog-card:hover { text-decoration: none !important; }
    .blog-card:hover h3 { color: var(--accent, #6b4fa3); }

    /* Wide-gap content flex rows (e.g. a "Week 3-4" label beside its text) keep
       both children on one line and overflow. Let them stack. */
    [style*="gap: 2rem"][style*="display: flex"],
    [style*="display: flex"][style*="gap: 2rem"] { flex-wrap: wrap !important; }

    /* --- Header/nav button rows ---
       Blog articles put "Back to Blog / Contact Us / Home" in a nowrap flex row
       (~473px), and blog/index keeps the full desktop menu. Let them wrap. */
    header nav, header nav > div, header nav ul, nav > ul,
    header [style*="display: flex"], header [style*="display:flex"] {
        flex-wrap: wrap !important;
    }
    /* Match the main site: the inline nav menu collapses to a three-dot button
       on phones, so the rest of the site is still reachable. */
    .site-nav-links { display: none !important; }
    .site-menu-btn { display: block !important; }
    header { position: sticky; }
    header nav { position: relative; }
    header nav ul, nav > ul { gap: .75rem !important; }
    header nav > div { gap: .5rem !important; row-gap: .5rem !important; }
    header nav a[style*="padding"] { padding: .55rem .9rem !important; font-size: .85rem !important; }

    /* --- Tables ---
       Wide comparison tables push the whole page sideways. Let them scroll
       inside their own box instead. */
    table { display: block !important; width: 100% !important; max-width: 100% !important;
            overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Media and pre blocks must never exceed the screen. */
    img, video, iframe, pre, canvas, svg { max-width: 100% !important; height: auto; }
    pre { overflow-x: auto !important; }
}

/* Final safety net: whatever slips through must not make the browser zoom the
   page out (the cause of the dead band down the right-hand side). Applied to
   html rather than body so position:fixed elements are unaffected. */
@media (max-width: 640px) {
    html { overflow-x: hidden; max-width: 100%; }
}