@media (max-width:768px){

.hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
}

.hero-left,
.hero-right{
    width:100%;
}

}

.hero h1{
font-size:54px;
}

.machine-placeholder{
width:300px;
height:600px;
}

}
@media (max-width:991px){

.hero-features{

flex-direction:column;

gap:25px;

}

.feature-item{

border-right:none;

padding-right:0;

}

}
@media (max-width:767px){

.hero-buttons{

display:flex;
flex-direction:column;
gap:15px;

}

.hero-buttons a{

width:100%;
text-align:center;

}

}
@media (max-width:767px){

.hero-machine{
    width:100%;
    max-width:340px;
    margin:0 auto;
}

}

@media (max-width:767px){

.hero-features{

display:flex;
flex-direction:column;
gap:20px;

}

.feature-item{

border:none;
padding:25px;

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

border-radius:18px;

}

}
@media (max-width:991px){

.possibility-grid{

grid-template-columns:1fr;

}

.featured{

order:-1;

}

}

@media (max-width:767px){

.benefit-grid{

grid-template-columns:1fr;

}

}

@media (max-width:767px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

}
.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

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

@media (max-width: 768px){

.main-nav{
    display:none;
}

.header-cta{
    display:none;
}

.logo img{
    height:42px;
}

.logo{
    font-size:28px;
}

.site-header{
    padding:16px 0;
}

}

@media (max-width:768px){

.machine-glow{

    width:320px;

    height:320px;

    left:50%;

    transform:translateX(-50%);

}

}
/* =====================================
   Mobile Hero Layout
===================================== */

@media (max-width:768px){

.hero-grid{

    display:flex;

    flex-direction:column;

}

.hero-right{

    order:-1;

    margin-bottom:30px;

}

.hero-left{

    order:1;

}

.hero-machine{

    max-width:320px;

    margin:auto;

}

}
@media (max-width:991px){

.product-nav{

    display:none;

}

}

@media (max-width:768px){

    .comparison-table{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    .comparison-header,
    .comparison-row{

        min-width:700px;

    }

}