I'm so sorry, as I suspect that this is "out there" somewhere as it seems like it would be a pretty typical need / want, but I'm afraid that I've not yet found the answer in my searching.

So basically I just want to display both a text footer and a "Page X of Y" notation on the bottom of each page, preferably with a line break between the text footer and the page number indication (bonus marks if the page number indication could be right aligned while the text footer was center aligned). Something like this:

XYZ Company / 800-888-9999

Page 1 of 3

Thanks so much in advance for helping me out!

To perform sizing and/or positioning within the page footer, you can use the method described here. For example:

<style>
@page {
    @bottom-center { content: flow(footer); }
}
#footer {
    prince-flow: static(footer, start);
}
#footer > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#footer > div::after {
    content: "Page " counter(page) " of " counter(pages);
    align-self: flex-end;
}
h1 {
    page-break-before: always;
}
</style>
<h1>Section 1</h1>
<h1>Section 2</h1>
<h1>Section 3</h1>
<div id="footer">
    <div>XYZ Company / 800-888-9999</div>
</div>