/* Defensive mobile layout for Android browsers that request a desktop-sized layout viewport. */
@-ms-viewport{width:device-width}
@viewport{width:device-width}

html,body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}

img,svg,video,iframe{
  max-width:100%!important;
  height:auto;
}

@media (max-device-width:900px), (max-width:900px){
  header{
    width:100%!important;
    padding:14px 16px!important;
    gap:12px!important;
  }

  .brand{
    min-width:0!important;
    gap:9px!important;
  }

  .brand img{
    width:52px!important;
    height:52px!important;
    flex:none!important;
  }

  .brand span{
    font-size:12px!important;
    overflow-wrap:anywhere!important;
  }

  .back{
    flex:none!important;
    padding:9px 11px!important;
    font-size:12px!important;
  }

  .hero{
    width:100%!important;
    padding:36px 16px 28px!important;
  }

  .hero h1{
    font-size:34px!important;
    line-height:1.35!important;
  }

  .hero p{
    font-size:16px!important;
  }

  .layout{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:18px 16px 50px!important;
  }

  .form-card,.side,.summary,.process,.form-section,
  .grid,.field,fieldset,.checks,.choice,.packages,.package{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .form-section{
    padding:22px 16px!important;
  }

  .grid,.checks,.packages{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }

  .field.full{
    grid-column:auto!important;
  }

  input,select,textarea,button{
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }

  .side{
    position:static!important;
    margin-top:18px!important;
  }

  .recommended:after{
    font-size:8px!important;
  }

  footer{
    width:100%!important;
    padding:24px 16px!important;
    flex-direction:column!important;
  }
}

@media (max-device-width:390px), (max-width:390px){
  .hero h1{font-size:30px!important}
  .meta{gap:8px!important}
  .meta span{font-size:12px!important}
  .form-section h2{font-size:21px!important}
}