/*
 * V22 — Compact mobile Desktop-site hero
 * Touch devices using Desktop Site now get a cleaner laptop-like hero:
 * left content, right compact author preview.
 */
@media (pointer:coarse) and (min-width:768px) and (max-width:1100px){
    .container{
        width:min(948px, calc(100% - 32px)) !important;
    }

    .hero{
        padding-top:22px !important;
        padding-bottom:20px !important;
    }

    .hero-grid{
        grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
        align-items:start !important;
        gap:22px !important;
    }

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

    .hero h1{
        font-size:27px !important;
        line-height:1.12 !important;
        max-width:420px !important;
        margin:0 0 10px !important;
        letter-spacing:-0.03em !important;
    }

    .hero-lead{
        font-size:12.75px !important;
        line-height:1.58 !important;
        max-width:410px !important;
        margin:0 0 14px !important;
    }

    .hero-actions{
        display:flex !important;
        align-items:center !important;
        flex-wrap:wrap !important;
        gap:8px !important;
        margin:0 !important;
    }

    .hero-actions .button-primary{
        min-height:39px !important;
        padding:9px 14px !important;
        font-size:12px !important;
        border-radius:10px !important;
        white-space:nowrap !important;
    }

    /* Secondary CTA becomes a text-link style action for this mode */
    .hero-actions .button-secondary{
        background:transparent !important;
        border:0 !important;
        padding:0 !important;
        min-height:0 !important;
        font-size:12px !important;
        color:var(--text) !important;
        text-decoration:underline !important;
        text-underline-offset:3px;
        border-radius:0 !important;
        width:auto !important;
        white-space:nowrap !important;
    }

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

    .floating-note.note-one{
        font-size:9px !important;
        padding:6px 10px !important;
        left:0 !important;
        top:-11px !important;
    }

    .dashboard-card{
        padding:13px !important;
        border-radius:16px !important;
        width:100% !important;
    }

    .dashboard-topbar{
        margin-bottom:9px !important;
    }

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

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

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

    .verified-pill{
        font-size:7.5px !important;
        padding:5px 8px !important;
    }

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

    .dashboard-metrics article{
        padding:8px 6px !important;
        border-radius:10px !important;
    }

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

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

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

    .chart-head > div > span{
        font-size:7px !important;
    }

    .chart-head strong{
        font-size:9px !important;
        line-height:1.25 !important;
    }

    .chart-head small,
    .chart-labels{
        font-size:6.5px !important;
    }

    .performance-chart{
        height:118px !important;
        margin-top:2px !important;
    }

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

    /* Hide the extra top-article block to reduce congestion */
    .dashboard-bottom > div:first-child{
        display:none !important;
    }

    .rank-box{
        min-width:64px !important;
        padding:6px 7px !important;
        border-radius:9px !important;
        margin-left:auto !important;
    }

    .rank-box span{
        font-size:7px !important;
    }

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

    /* Remove the extra hero footer line from this mode to declutter hero */
    .positioning-line{
        display:none !important;
    }

    /* Slightly tighten the next section so transition feels natural */
    .journey-section{
        padding-top:34px !important;
    }
}