/* =====================================================
   TABLET + MOBILE
   ===================================================== */

@media(max-width:728px){

.topbar-inner,
.hero-inner,
.main-area{
width:94%;
max-width:100%;
}

.topnav{
display:none;
}

.mobile-menu{
display:block;
}

.brand{
font-size:1.55rem;
}

.hero-banner{
background-position:left center;
}

.hero-inner{
min-height:290px;
padding:24px 0 72px;
align-items:flex-start;
}

.hero-text{
width:100%;
max-width:100%;
padding-left:32%;
padding-top:18px;
}

.hero-text h1{
font-size:1.9rem;
line-height:1.18;
letter-spacing:-1px;
}

.hero-text p{
font-size:1rem;
line-height:1.65;
margin-top:10px;
}

.main-area{
margin-top:-52px;
}

.search-float{
padding:18px;
border-radius:24px;
}

.checkber-head h2{
font-size:1.7rem;
}

.checkber-head p{
font-size:1.05rem;
line-height:1.65;
}

.checkber-form label{
font-size:1.08rem;
}

.phone-input-wrap{
flex-direction:column;
gap:12px;
}

.phone-input-wrap input{
height:60px;
font-size:1.6rem;
border-radius:16px;
}

.phone-input-wrap button{
width:100%;
height:60px;
border-radius:16px;
}

.score-circle{
font-size:2rem;
padding:9px 18px;
}

.score-caption{
font-size:1.08rem;
}

.result-head h2{
font-size:2rem;
}

.result-head p{
font-size:1rem;
line-height:1.6;
}

.result-card{
padding:18px;
border-radius:22px;
}

.result-desc,
.legacy-result{
padding:18px 14px;
font-size:1.05rem;
line-height:1.8;
}

.legacy-result .legacy-title{
font-size:1.25rem;
}

.special-code,
.pair-code{
font-size:1.7rem;
}

.pair-title{
font-size:1.08rem;
}

.method-grid,
.tool-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.method-card{
flex-direction:column;
text-align:center;
padding:14px;
}

.tool-card{
min-height:165px;
padding:16px;
}

.promo-banner{
flex-direction:column;
align-items:flex-start;
padding:20px 16px;
}

.promo-grid{
grid-template-columns:1fr;
}

.trust-section{
grid-template-columns:1fr;
}

.footer-main{
flex-direction:column;
align-items:flex-start;
}

}


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

@media(max-width:430px){

.brand{
font-size:1.38rem;
}

.hero-text{
padding-left:28%;
padding-top:14px;
}

.hero-text h1{
font-size:1.65rem;
}

.hero-text p{
font-size:.92rem;
line-height:1.55;
}

.hero-inner{
min-height:250px;
}

.checkber-head h2{
font-size:1.45rem;
}

.phone-input-wrap input{
font-size:1.45rem;
}

.score-circle{
font-size:1.8rem;
}

.special-code,
.pair-code{
font-size:1.5rem;
padding:6px 12px;
}

.tool-card h3,
.method-card h3{
font-size:.95rem;
}

.tool-card p,
.method-card p{
font-size:.88rem;
}

}