/* V23 mobile art direction
   Mobile heroes use dedicated 2:3 artwork. Desktop rules are untouched. */
@media (max-width:820px){
  body.v22:not(.v20-page-lineup) .xhero{
    --v23-mobile-hero:none;
    display:block!important;
    position:relative!important;
    min-height:0!important;
    aspect-ratio:2/3!important;
    overflow:hidden!important;
    color:#f8fbff!important;
    background-color:#071323!important;
    background-image:linear-gradient(180deg,rgba(4,12,25,.92) 0%,rgba(4,12,25,.72) 34%,rgba(4,12,25,.08) 62%),var(--v23-mobile-hero)!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:cover!important;
  }
  body.v22:not(.v20-page-lineup) .xhero::after{content:none!important;display:none!important}
  body.v22:not(.v20-page-lineup) .xhero > .wrap{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    min-height:0!important;
    padding:32px 20px 0!important;
  }
  body.v22:not(.v20-page-lineup) .xhero .hx{
    max-width:none!important;
    padding:0!important;
    gap:12px!important;
    text-align:left!important;
    align-items:flex-start!important;
  }
  body.v22:not(.v20-page-lineup) .xhero h1{
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(32px,9.6vw,42px)!important;
    line-height:1.05!important;
    letter-spacing:-.045em!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
  body.v22:not(.v20-page-lineup) .xhero p{
    max-width:35rem!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.55!important;
    color:#d7e1ef!important;
  }
  body.v22:not(.v20-page-lineup) .xhero .eyebrow{
    color:#8ab4ff!important;
    font-size:11px!important;
    letter-spacing:.14em!important;
  }
  body.v22:not(.v20-page-lineup) .xhero .note{
    position:absolute!important;
    z-index:3!important;
    top:10px!important;
    left:20px!important;
    right:20px!important;
    display:block!important;
    max-width:max-content!important;
    margin:0!important;
    padding:6px 9px!important;
    transform:none!important;
    overflow:hidden!important;
    color:#cbd7e8!important;
    background:rgba(5,14,28,.58)!important;
    border-color:rgba(255,255,255,.14)!important;
    box-shadow:none!important;
    font-size:10px!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  body.v22:not(.v20-page-lineup) .xhero .herofeats,
  body.v22:not(.v20-page-lineup) .xhero .xstats{display:none!important}
  body.v22:not(.v20-page-lineup) .xhero .cta{gap:8px!important;margin-top:2px!important}
  body.v22:not(.v20-page-lineup) .xhero .cta .btn{
    min-height:46px!important;
    padding:11px 16px!important;
    font-size:14px!important;
  }
  body.v22:not(.v20-page-lineup) .xhero .cta .btn.ghost{display:none!important}

  /* Product/gallery media stays complete and proportional on phones. */
  body.v22:not(.v20-page-lineup) .deep .m,
  body.v22:not(.v20-page-lineup) .angles figure,
  body.v22:not(.v20-page-lineup) .configmain,
  body.v22:not(.v20-page-lineup) .productgallery{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#0b1626!important;
  }
  body.v22:not(.v20-page-lineup) .deep .m > img,
  body.v22:not(.v20-page-lineup) .angles figure img,
  body.v22:not(.v20-page-lineup) .configmain img,
  body.v22:not(.v20-page-lineup) .productgallery img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  body.v22.v20-page-store .machinephoto,
  body.v22.v20-page-store .commercecard .productmedia{background:#edf2f7!important;aspect-ratio:4/3!important}
  body.v22.v20-page-store .machinephoto img,
  body.v22.v20-page-store .commercecard .productimg{
    padding:14px!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  body.v22.v20-page-home .hbg-home{--v23-mobile-hero:url("/assets/v46/media/home-hero-candidate-v1-e2c1a57a.webp")}
  body.v22.v20-page-etxa-plus .hbg-features{--v23-mobile-hero:url("/assets/v46/media/etxa-plus-hero-candidate-v1-ff9d608e.webp")}
  body.v22.v20-page-materials .hbg-materials{--v23-mobile-hero:url("/assets/v46/media/materials-hero-candidate-v1-6c832fd0.webp")}
  body.v22.v20-page-scenarios .hbg-scenarios{--v23-mobile-hero:url("/assets/v46/media/scenarios-hero-candidate-v1-1db9e88b.webp")}
  body.v22.v20-page-story .hbg-story{--v23-mobile-hero:url("/assets/v46/media/story-hero-candidate-v1-1c65b95a.webp")}
  body.v22.v20-page-crowdfunding .hbg-crowd{--v23-mobile-hero:url("/assets/v46/media/crowdfunding-hero-candidate-v1-19dd4708.webp")}

  /* Win over the older V24/V27 mobile split-hero rules loaded earlier. */
  html body.v22:not(.v20-page-lineup) .xhero.v20-mapped-section{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;
    background-color:#071323!important;
    background-image:linear-gradient(180deg,rgba(4,12,25,.92) 0%,rgba(4,12,25,.72) 34%,rgba(4,12,25,.08) 62%),var(--v23-mobile-hero)!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:cover!important;
  }
  html body.v22:not(.v20-page-lineup) .xhero.v20-mapped-section::after{
    content:none!important;
    display:none!important;
  }
  html body.v22:not(.v20-page-lineup) .xhero.v20-mapped-section > .note{
    display:none!important;
  }
}