/* ==========================================================
   AIMOMIXO WECHAT REVIEW V9
   MOBILE FINAL
   ========================================================== */

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

*{
    box-sizing:border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.v9-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    padding:14px 18px 0;

    background:rgba(248,250,255,.96);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}

.v9-header-inner{
    width:min(1180px,100%);

    margin:0 auto;

    min-height:62px;

    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    background:#fff;

    border:1px solid #e5e9f2;
    border-radius:15px;

    box-shadow:
        0 8px 26px rgba(48,58,102,.055);
}


.v9-brand{
    min-width:0;

    display:flex;
    align-items:center;

    gap:11px;

    color:#151c30;
    text-decoration:none;
}


.v9-brand-mark{
    flex:0 0 28px;

    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    border-radius:9px;

    background:
      linear-gradient(
        135deg,
        #58d5cf,
        #6671ff 55%,
        #925bef
      );

    font-size:13px;
    font-weight:900;
}


.v9-brand-copy{
    min-width:0;
}


.v9-brand-copy strong{
    display:block;

    color:#171e31;

    font-size:14px;
    font-weight:700;

    white-space:nowrap;
}


.v9-brand-copy small{
    display:block;

    margin-top:2px;

    color:#999faf;

    font-size:8px;
    letter-spacing:.20em;
}


.v9-nav{
    display:flex !important;
    align-items:center;

    gap:25px;
}


.v9-nav a{
    position:relative;

    display:block;

    padding:22px 0 18px;

    color:#606779;

    text-decoration:none;

    font-size:13px;
    line-height:1;

    white-space:nowrap;

    border-bottom:
        2px solid transparent;
}


.v9-nav a.active{
    color:#5868ee;

    border-bottom-color:#6672ff;
}


/* ==========================================================
   CLEAN ALL OLD VIDEO OVERLAY SYSTEMS
   ========================================================== */

.v6-video-placeholder::before,
.v6-video-placeholder::after,

.aimx-v8-play-icon,
.aimx-v8-play-btn,
.aimx-v8-thumb-label,
.aimx-v8-thumb-title,
.aimx-v8-thumb-sub,

.v81-play,
.v81-play-label,
.v81-loading,
.v81-shade,

.v7-video-loading{
    display:none !important;
}


/* ==========================================================
   VIDEO CARDS
   ========================================================== */

.v6-video-card{
    overflow:hidden;

    background:#fff;

    border:1px solid #e3e8f1;

    border-radius:22px;

    box-shadow:
      0 12px 32px rgba(43,53,97,.055);
}


.v6-video-box{
    position:relative !important;

    width:100% !important;

    aspect-ratio:1 / 1 !important;

    overflow:hidden !important;

    background:#161b29 !important;
}


/* poster layer */

.v6-video-placeholder{
    position:absolute !important;

    inset:0 !important;

    z-index:3 !important;

    width:100% !important;
    height:100% !important;

    padding:0 !important;

    display:block !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

    cursor:pointer;
}


/* hide ALL legacy placeholder text */

.v6-video-placeholder > span,
.v6-video-placeholder > strong,
.v6-video-placeholder > p{
    display:none !important;
}


/* dark film overlay */

.v9-poster-shade{
    position:absolute;

    inset:0;

    z-index:1;

    background:
      linear-gradient(
        to bottom,
        rgba(8,13,28,.04) 35%,
        rgba(8,13,28,.30) 100%
      );
}


/* ONE AND ONLY PLAY BUTTON */

.v9-play-button{
    position:absolute;

    left:50%;
    top:50%;

    z-index:4;

    transform:
        translate(-50%,-50%);

    width:70px;
    height:70px;

    padding:0;

    border:0;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.96);

    box-shadow:
      0 10px 30px rgba(20,28,72,.22);

    cursor:pointer;

    -webkit-tap-highlight-color:
        transparent;
}


.v9-play-button::after{
    content:"";

    width:0;
    height:0;

    margin-left:5px;

    border-top:
        11px solid transparent;

    border-bottom:
        11px solid transparent;

    border-left:
        18px solid #626ef4;
}


/* video itself */

.v6-video-box video{
    position:absolute !important;

    inset:0 !important;

    z-index:6 !important;

    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:contain !important;

    background:#000 !important;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .15s ease;
}


.v6-video-box.v9-started video{
    opacity:1 !important;

    pointer-events:auto;
}


.v6-video-box.v9-started
.v6-video-placeholder{
    display:none !important;
}


/* card information below */

.v6-video-info{
    padding:19px 20px 21px !important;
}


.v6-video-info strong{
    display:block;

    color:#151b2c;

    font-size:15px;
}


.v6-video-info span{
    display:block;

    margin-top:7px;

    color:#82899b;

    font-size:11px;
    line-height:1.6;
}


/* ==========================================================
   HERO DESKTOP
   ========================================================== */

.hero,
.hero-grid{
    max-width:100%;
}


.hero-image.v6-hero-art{
    justify-self:center !important;

    margin-left:auto !important;
    margin-right:auto !important;

    overflow:hidden !important;
}


.hero-image.v6-hero-art
.image-fallback{
    display:none !important;
}


.hero-image.v6-hero-art img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:820px){


    /* ---------------------------------------
       MOBILE HEADER
       --------------------------------------- */

    .v9-header{
        padding:
          8px 10px 0;
    }


    .v9-header-inner{
        width:100%;

        min-height:0;

        padding:
          11px 10px 0;

        flex-direction:column;

        align-items:stretch;

        gap:9px;

        border-radius:14px;
    }


    .v9-brand{
        width:100%;

        justify-content:flex-start;

        padding:
          0 3px 4px;
    }


    .v9-brand-copy strong{
        max-width:
          calc(100vw - 100px);

        overflow:hidden;

        text-overflow:ellipsis;

        font-size:12px;
    }


    .v9-brand-mark{
        width:27px;
        height:27px;

        flex-basis:27px;
    }


    .v9-nav{
        width:100%;

        display:grid !important;

        grid-template-columns:
          repeat(5,minmax(0,1fr));

        gap:0 !important;

        border-top:
          1px solid #eef0f5;
    }


    .v9-nav a{
        min-width:0;

        padding:
          11px 1px 10px !important;

        overflow:hidden;

        text-align:center;

        text-overflow:ellipsis;

        font-size:10.5px;

        border-bottom-width:
          2px;
    }



    /* ---------------------------------------
       GENERAL MOBILE WIDTH
       --------------------------------------- */

    .wrap,
    .narrow,
    .hero-grid{
        width:100% !important;

        max-width:100% !important;
    }



    /* ---------------------------------------
       HOMEPAGE HERO
       --------------------------------------- */

    .hero{
        padding:
          18px 12px 34px !important;
    }


    .hero-grid{
        padding:
          30px 20px !important;

        display:grid !important;

        grid-template-columns:
          minmax(0,1fr) !important;

        gap:34px !important;
    }


    .hero-copy{
        width:100% !important;

        min-width:0 !important;

        text-align:center !important;
    }


    .hero-copy .tag{
        display:inline-flex !important;

        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    .hero-copy h1{
        margin-left:auto !important;
        margin-right:auto !important;

        font-size:
          clamp(37px,10vw,48px) !important;

        line-height:1.05 !important;

        letter-spacing:
          -.045em !important;
    }


    .hero-copy .lead{
        width:100% !important;

        max-width:420px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        font-size:14px !important;
        line-height:1.9 !important;
    }



    /* buttons are vertical and cannot overflow */

    .hero-buttons{
        width:100% !important;

        margin:
          25px auto 0 !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        gap:11px !important;
    }


    .hero-buttons .button,
    .hero-buttons a{
        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        min-height:48px !important;

        margin:0 !important;

        padding:
          0 16px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        white-space:normal !important;
    }



    .hero-prices{
        width:100% !important;

        margin:
          25px auto 0 !important;

        display:flex !important;

        justify-content:center !important;

        text-align:center !important;
    }



    /* ---------------------------------------
       HERO IMAGE
       --------------------------------------- */

    .hero-image.v6-hero-art{
        width:
          min(100%,360px) !important;

        max-width:360px !important;

        min-width:0 !important;

        margin:
          0 auto !important;

        justify-self:center !important;

        align-self:center !important;

        aspect-ratio:
          561 / 701 !important;

        padding:0 !important;

        border-radius:22px !important;
    }


    .hero-image.v6-hero-art img{
        width:100% !important;
        height:100% !important;

        object-fit:contain !important;
    }



    /* ---------------------------------------
       VIDEO SECTION
       --------------------------------------- */

    .v6-video-section{
        padding:
          45px 12px !important;
    }


    .v6-video-head{
        padding:
          0 12px !important;

        margin-bottom:
          26px !important;
    }


    .v6-video-head h2{
        font-size:
          33px !important;
    }


    .v6-video-head p{
        font-size:
          13px !important;

        line-height:
          1.85 !important;
    }


    .v6-video-grid{
        width:100% !important;

        padding:0 !important;

        display:grid !important;

        grid-template-columns:
          minmax(0,1fr) !important;

        gap:20px !important;
    }


    .v6-video-card{
        width:100% !important;

        max-width:430px !important;

        margin:
          0 auto !important;
    }


    .v9-play-button{
        width:66px;
        height:66px;
    }



    /* ---------------------------------------
       ORDER CTA
       --------------------------------------- */

    .v6-order-callout{
        width:100% !important;

        margin-top:
          28px !important;

        padding:
          25px 21px !important;

        flex-direction:
          column !important;

        align-items:
          stretch !important;

        text-align:center !important;
    }


    .v6-order-button{
        width:100% !important;
    }

}


/* very small phones */

@media(max-width:390px){

    .v9-nav a{
        font-size:9.5px;
    }

    .hero-copy h1{
        font-size:36px !important;
    }

}