/*
 * V21 — Normal mobile layout
 * This file loads last and controls phones below 768px only.
 */

@media (max-width:767px){
    html{
        -webkit-text-size-adjust:100% !important;
        text-size-adjust:100% !important;
    }

    body{
        min-width:320px;
        overflow-x:hidden;
    }

    .container{
        width:calc(100% - 28px) !important;
    }

    .header-inner{
        height:54px !important;
    }

    .brand img{
        width:132px !important;
        max-width:46vw !important;
    }

    .site-header .button{
        display:inline-flex !important;
        min-height:34px !important;
        padding:7px 11px !important;
        border-radius:9px !important;
        font-size:10px !important;
    }

    .hero{
        padding:20px 0 28px !important;
    }

    .hero-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .hero-copy{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
    }

    .hero h1{
        width:100% !important;
        max-width:none !important;
        font-size:24px !important;
        line-height:1.16 !important;
        letter-spacing:-.025em !important;
        margin:0 0 11px !important;
    }

    /* Let the sentence wrap naturally instead of forcing an awkward 5-line break. */
    .hero-break{
        display:none !important;
    }

    .hero h1 .accent-word{
        color:#16967f !important;
        -webkit-text-fill-color:#16967f !important;
    }

    .hero-lead{
        width:100% !important;
        max-width:none !important;
        font-size:13px !important;
        line-height:1.62 !important;
        margin:0 0 16px !important;
    }

    .hero-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        margin:0 !important;
    }

    .hero-actions .button{
        width:100% !important;
        min-height:42px !important;
        padding:9px 8px !important;
        border-radius:10px !important;
        font-size:11px !important;
        line-height:1.3 !important;
        white-space:normal !important;
        text-align:center;
    }

    .dashboard-shell{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    .dashboard-card{
        width:100% !important;
        max-width:none !important;
        padding:12px !important;
        border-radius:15px !important;
    }

    .dashboard-topbar{
        margin-bottom:11px !important;
        gap:8px !important;
    }

    .dashboard-user{
        gap:8px !important;
    }

    .avatar{
        width:39px !important;
        height:39px !important;
        flex-basis:39px !important;
        border-radius:10px !important;
    }

    .dashboard-user h2{
        font-size:13px !important;
    }

    .dashboard-user p{
        font-size:8px !important;
    }

    .verified-pill{
        padding:5px 7px !important;
        border-radius:999px !important;
        font-size:8px !important;
    }

    .dashboard-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px !important;
    }

    .dashboard-metrics article,
    .dashboard-metrics article:last-child{
        grid-column:auto !important;
        padding:8px 6px !important;
        border-radius:10px !important;
    }

    .dashboard-metrics span{
        font-size:7px !important;
        line-height:1.25 !important;
        margin-bottom:3px !important;
    }

    .dashboard-metrics strong{
        font-size:13px !important;
    }

    .chart-card{
        margin-top:7px !important;
        padding:9px !important;
        border-radius:11px !important;
    }

    .chart-head strong{
        font-size:10px !important;
    }

    .chart-head small{
        font-size:7px !important;
    }

    .chart-labels{
        font-size:7px !important;
    }

    .dashboard-bottom{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        gap:6px !important;
        margin-top:7px !important;
    }

    .dashboard-bottom span{
        font-size:7px !important;
    }

    .dashboard-bottom strong{
        font-size:9px !important;
        line-height:1.35 !important;
    }

    .rank-box{
        width:auto !important;
        min-width:64px !important;
        display:block !important;
        padding:6px 7px !important;
        text-align:center !important;
        border-radius:9px !important;
    }

    .rank-box strong{
        font-size:15px !important;
        margin-top:1px !important;
    }

    .positioning-line{
        margin-top:15px !important;
        padding-top:10px !important;
        gap:3px !important;
    }

    .positioning-line span,
    .positioning-line strong{
        font-size:10.5px !important;
        line-height:1.45 !important;
    }

    .mobile-apply{
        display:none !important;
    }

    .site-footer{
        padding-bottom:24px !important;
    }
}

@media (max-width:389px){
    .container{
        width:calc(100% - 24px) !important;
    }

    .brand img{
        width:124px !important;
    }

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

    .hero-actions{
        grid-template-columns:1fr !important;
    }

    .hero-actions .button{
        min-height:40px !important;
    }

    .dashboard-card{
        padding:10px !important;
    }

    .dashboard-metrics article,
    .dashboard-metrics article:last-child{
        padding:7px 4px !important;
    }

    .dashboard-metrics span{
        font-size:6.5px !important;
    }

    .dashboard-metrics strong{
        font-size:12px !important;
    }
}