/* ClearMyWork — MOBILE HERO FIX
   Append this file AFTER landing-upgrade.css.
   Desktop remains unchanged. */

@media (max-width: 620px){

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

  /* ---------- compact mobile header ---------- */
  .site-header .wrap{
    width:100% !important;
    max-width:none !important;
    padding:12px 16px !important;
    box-sizing:border-box;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .site-header .logo,
  .site-header .brand,
  .site-header img{
    max-width:210px !important;
    height:auto !important;
  }

  .site-header nav{
    display:flex !important;
    margin:0 !important;
    gap:0 !important;
    flex:0 0 auto !important;
  }

  .site-header nav a:not(.btn){
    display:none !important;
  }

  .site-header nav .btn,
  .site-header .btn{
    width:auto !important;
    min-width:0 !important;
    max-width:150px !important;
    padding:13px 15px !important;
    font-size:14px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    border-radius:12px !important;
  }

  /* ---------- purpose-built mobile hero ---------- */
  .hero-upgrade{
    padding:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#062f4d !important;
  }

  .hero-upgrade .wrap{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    width:100% !important;
  }

  .hero-copy{
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding:36px 24px 24px !important;
    margin:0 !important;
  }

  .hero-copy .eyebrow,
  .hero-copy .kicker{
    display:inline-block !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 0 20px !important;
    padding:9px 14px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    letter-spacing:.04em !important;
    border-radius:999px !important;
  }

  .hero-copy h1{
    width:100% !important;
    max-width:360px !important;
    margin:0 0 18px !important;
    padding:0 !important;
    font-size:42px !important;
    line-height:.98 !important;
    letter-spacing:-1.4px !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .hero-copy h1 span{
    display:inline !important;
  }

  .hero-copy > p,
  .hero-copy .hero-sub,
  .hero-copy .lead{
    width:100% !important;
    max-width:355px !important;
    margin:0 !important;
    font-size:18px !important;
    line-height:1.45 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /* Photo becomes its own panel; no text overlays the face */
  .hero-visual{
    order:2 !important;
    position:relative !important;
    width:100% !important;
    height:300px !important;
    min-height:300px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .hero-photo{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    background-size:cover !important;
    background-position:68% 35% !important;
  }

  .hero-script,
  .before-after{
    display:none !important;
  }

  /* Benefits + CTA follow the photo */
  .hero-benefits,
  .benefits,
  .hero-copy ul{
    order:3 !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:24px 24px 4px !important;
  }

  .hero-copy ul{
    padding-left:24px !important;
    list-style:none !important;
  }

  .hero-copy li,
  .hero-benefits > *,
  .benefits > *{
    width:auto !important;
    max-width:none !important;
    margin:0 0 13px !important;
    font-size:16px !important;
    line-height:1.3 !important;
    word-break:normal !important;
  }

  .hero-copy .btn,
  .hero-copy .btn-primary,
  .hero-cta{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:calc(100% - 48px) !important;
    max-width:none !important;
    min-height:58px !important;
    box-sizing:border-box !important;
    margin:20px 24px 0 !important;
    padding:16px 18px !important;
    font-size:17px !important;
    line-height:1.15 !important;
    text-align:center !important;
    border-radius:12px !important;
    white-space:normal !important;
  }

  .hero-copy .fine-print,
  .hero-copy small{
    display:block !important;
    width:calc(100% - 48px) !important;
    max-width:none !important;
    margin:12px 24px 28px !important;
    font-size:12px !important;
    line-height:1.4 !important;
  }

  /* If benefits/button are physically inside hero-copy in the current HTML,
     keep them compact rather than allowing desktop widths to survive. */
  .hero-copy{
    display:block !important;
  }

  /* lower content was already approved; only prevent accidental overflow */
  .below-hero,
  .below-hero .wrap{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

@media (max-width: 390px){
  .site-header .logo,
  .site-header .brand,
  .site-header img{
    max-width:185px !important;
  }

  .site-header nav .btn,
  .site-header .btn{
    max-width:132px !important;
    padding:12px 12px !important;
    font-size:13px !important;
  }

  .hero-copy{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .hero-copy h1{
    font-size:38px !important;
    max-width:335px !important;
  }

  .hero-copy > p,
  .hero-copy .hero-sub,
  .hero-copy .lead{
    font-size:17px !important;
  }

  .hero-visual{
    height:275px !important;
    min-height:275px !important;
  }
}