Heroku apps, DNS and MX records

I have a domain, example.com, for my mom's business. I'm having trouble configuring the records to allow the Heroku app to exist simultaneously with email through Microsoft Office 365. The site should be accessible by www.example.comandhttps://example.com. It is currently only working with the www version.

The issue is that I need a CNAME record pointing to example.com, but can't use host = @ because it will break the MX records due to the priority of CNAME.

Here's my current configuration:

TYPE  | host | value                                       | TTL----------------------------------------------------------------CNAME | www  | www.example.com.herokudns.com.           | 60MX    | @    | example-com.mail.protection.outlook.com. | 60

This works. But the site isn't accessible at example.com (without the www). I would like to make it:

TYPE  | host | value                                       | TTL----------------------------------------------------------------CNAME | @    | example.com.herokudns.com.               | 60CNAME | www  | www.example.com.herokudns.com.           | 60MX    | @    | example-com.mail.protection.outlook.com. | 60

But then her email stops working. How can I make the site accessible at example.com?