/* =========================================================
   MOBILE
   Reference viewport: 375 × 667
   ========================================================= */

@media (max-width:600px){

    /* =====================================================
       PAGE GEOMETRY

       Base desktop:
           .hx-section {
               padding:92px 28px;
               margin-left:-28px;
               margin-right:-28px;
           }

       Existing mobile base CSS changes only the margins to
       -20px but leaves 28px horizontal padding.

       Fix the geometry here, once, at the section level.
       ===================================================== */

    .hxhome .hx-section{
        margin-left:-20px !important;
        margin-right:-20px !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }


    /* =====================================================
       MAJOR COMPONENT WIDTHS

       Components now use the width their section gives them.
       No component-level negative-margin compensation.
       ===================================================== */

    .hxhome .hx-product-visual,
    .hxhome .hx-chat-card,
    .hxhome .hx-screen,
    .hxhome .hx-example-chat{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }


    /* =====================================================
       PROGRESSIVE DISCLOSURE
       ===================================================== */

    .hx-mobile-collapsible{
        position:relative;
    }

    .hx-mobile-collapsible:not(.hx-mobile-open){
        max-height:6.1em;
        overflow:hidden;
    }

    .hx-mobile-collapsible:not(.hx-mobile-open)::after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:2.2em;
        pointer-events:none;
        background:linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            rgba(255,255,255,1)
        );
    }

    .hx-soft .hx-mobile-collapsible:not(.hx-mobile-open)::after{
        background:linear-gradient(
            to bottom,
            rgba(246,246,244,0),
            rgba(246,246,244,1)
        );
    }

    .hx-mobile-more{
        display:block;
        margin:.4rem auto 1rem;
        padding:.3rem .5rem;
        border:0;
        background:transparent;
        color:#9E3502;
        font:600 .8rem/1.2 -apple-system,
             BlinkMacSystemFont,
             "Segoe UI",
             Roboto,
             "Helvetica Neue",
             Arial,
             sans-serif;
        cursor:pointer;
    }

    .hxhome .hx-center .hx-mobile-collapsible{
        margin-bottom:0 !important;
    }


    /* =====================================================
       PRODUCT VISUAL
       ===================================================== */

    .hxhome #how-hailee-works .hx-product-visual{
        margin-top:1rem !important;
    }

    .hxhome .hx-product-visual img{
        display:block;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
    }

    .hxhome .hx-product-caption{
        padding:.75rem !important;
    }


    /* =====================================================
       SHARED MOBILE CHAT TYPOGRAPHY
       ===================================================== */

    .hxhome .hx-chat-card,
    .hxhome .hx-screen,
    .hxhome .hx-example-chat{
        font-size:.78rem !important;
        line-height:1.3 !important;
    }

    .hxhome .hx-msg,
    .hxhome .hx-msg p,
    .hxhome .hx-msg ul,
    .hxhome .hx-msg ol,
    .hxhome .hx-msg li,
    .hxhome .hx-msg b,
    .hxhome .hx-msg strong,
    .hxhome .hx-example-question,
    .hxhome .hx-example-question .hx-msg-user,
    .hxhome .hx-example-bubble,
    .hxhome .hx-example-insight,
    .hxhome .hx-example-followup,
    .hxhome .hx-example-insight p,
    .hxhome .hx-example-insight ul,
    .hxhome .hx-example-insight ol,
    .hxhome .hx-example-insight li{
        font-size:inherit !important;
        line-height:inherit !important;
    }


    /* =====================================================
       STANDARD CHAT / SCREEN BODY

       Desktop uses:
           padding:1rem 1rem 0 1.5rem

       Remove that desktop left indentation on mobile.
       ===================================================== */

    .hxhome .hx-chat-body,
    .hxhome .hx-screen-body{
        width:100% !important;
        max-width:none !important;
        padding:.65rem .5rem 0 !important;
        box-sizing:border-box !important;
    }


    /* =====================================================
       STANDARD CHAT MESSAGES
       ===================================================== */

    .hxhome .hx-msg{
        margin-bottom:.5rem !important;
        padding:.6rem .7rem !important;
        border-radius:11px !important;
        box-sizing:border-box !important;
    }

    .hxhome .hx-msg-ai{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .hxhome .hx-msg-user{
        width:max-content !important;
        max-width:94% !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }

    .hxhome .hx-msg p{
        margin:0 0 .4rem !important;
    }

    .hxhome .hx-msg p:last-child{
        margin-bottom:0 !important;
    }

    .hxhome .hx-msg ul,
    .hxhome .hx-msg ol{
        margin:.45rem 0 .45rem 1rem !important;
        padding:0 !important;
    }

    .hxhome .hx-msg li{
        margin:0 0 .25rem !important;
        padding:0 !important;
    }


    /* =====================================================
       EXAMPLE CHAT

       Same available width as every other component.
       Only the bubble itself gets an internal gutter.
       ===================================================== */

    .hxhome .hx-example-question{
        width:100% !important;
        max-width:none !important;
        padding:.5rem !important;
        box-sizing:border-box !important;
    }

    .hxhome .hx-example-question .hx-msg-user{
        width:max-content !important;
        max-width:94% !important;
        margin-left:auto !important;
        margin-right:0 !important;
        padding:.6rem .7rem !important;
        border-radius:11px !important;
        box-sizing:border-box !important;
    }

    .hxhome .hx-example-bubble{
        width:calc(100% - 1rem) !important;
        max-width:none !important;
        margin-left:.5rem !important;
        margin-right:.5rem !important;
        padding:.6rem .7rem !important;
        box-sizing:border-box !important;
    }

    .hxhome .hx-example-insight ul,
    .hxhome .hx-example-insight ol{
        margin:.45rem 0 .45rem 1rem !important;
        padding:0 !important;
    }

    .hxhome .hx-example-insight li{
        margin:0 0 .25rem !important;
        padding:0 !important;
    }

    .hxhome .hx-example-rule{
        margin:.6rem 0 !important;
    }


    /* =====================================================
       HAILEE ONE PRICING

       Still specific because its desktop grid is inline.
       ===================================================== */

    .hxhome #pricing > .hx-card{
        margin-top:2rem !important;
        padding:1.25rem !important;
    }

    .hxhome #pricing > .hx-card > div{
        grid-template-columns:1fr !important;
        gap:.75rem !important;
        align-items:start !important;
    }

    .hxhome #pricing > .hx-card > div > div:first-child{
        text-align:left !important;
    }

    .hxhome #pricing > .hx-card > div > div:first-child > a > div:first-child{
        font-size:2rem !important;
    }

    .hxhome #pricing > .hx-card > div > div:first-child .hx-eyebrow{
        margin-top:.4rem !important;
    }

}