#zendesk-modal-ul .btn {
    max-width:100%;text-align: left;
}

#zendesk-modal-text h1 {
    font-size: 24px;
    line-height: 28px;
}
#zendesk-modal-text h2 {
    font-size: 22px;
    line-height: 26px;
}
#zendesk-modal-text h3 {
    font-size: 18px;
    line-height: 24px;
}
#zendesk-modal-text h4 {
    font-size: 16px;
    line-height: 22px;
}
#zendesk-modal-text {
    text-align: left;
}
/*the ZD editor bakes an inline font-family (usually -apple-system/Segoe UI) into pasted content,
  most often on the spans inside list items. Force everything back to our body font (Cera).
  !important + the [style] attribute selector is the only way to beat an inline style.*/
.zendesk-content-wrapper [style*="font-family"],
#zendesk-modal-text [style*="font-family"],
.zd-modal-text [style*="font-family"] {
    font-family: "Cera", Arial, sans-serif !important;
}

.zendesk-content-wrapper a, .zendesk-content-wrapper a span {
    /*this is needed as otherwise they can appear white*/
    color:#C7376B !important
}

.zendesk-content-wrapper img {
    /*this is needed as otherwise some images will be too wide for the modal. Don't allow them to stretch too wide on desktop*/
    max-width: min(100%, 700px);
    height:auto;
    /*force ZD-embedded images onto their own line so they don't sit inline next to list items / paragraphs*/
    display: block;
    clear: both;
    margin: 10px 0;
    border-radius: 8px;
}

td img {
    /*this is required to ensure the images in tables display nicely*/
    /*ideally we should actually only apply this to 'td img' within #zendesk-modal-inner but I didn't know the CSS for that */
    width:100%;
    height:auto;
}

/*give headings extra top space so sections are easier to scan*/
.zendesk-content-wrapper h1,
.zendesk-content-wrapper h2,
.zendesk-content-wrapper h3,
.zendesk-content-wrapper h4,
.zendesk-content-wrapper h5,
.zendesk-content-wrapper h6,
#zendesk-modal-text h1,
#zendesk-modal-text h2,
#zendesk-modal-text h3,
#zendesk-modal-text h4,
#zendesk-modal-text h5,
#zendesk-modal-text h6 {
    margin-top: 32px;
}

/*...except the first heading in an article wrapper (the article title)*/
.zd-modal-text > h1:first-child,
.zd-modal-text > h2:first-child,
.zd-modal-text > h3:first-child,
.zd-modal-text > h4:first-child,
.zd-modal-text > h5:first-child,
.zd-modal-text > h6:first-child,
.zendesk-content-wrapper > h1:first-child,
.zendesk-content-wrapper > h2:first-child,
.zendesk-content-wrapper > h3:first-child,
.zendesk-content-wrapper > h4:first-child,
.zendesk-content-wrapper > h5:first-child,
.zendesk-content-wrapper > h6:first-child {
    margin-top: 0;
}

/*section headings on the category modal's contents list*/
.zd-toc-heading {
    margin: 24px 0 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    color: #888;
}
#zendesk-modal-ul .zd-toc-heading:first-child {
    margin-top: 0;
}
#zd-back-to-list-wrapper {
    margin-bottom: 16px;
}