[Moonbase59]

Just had a quick look, and tried your file on a Pocketbook Era, the Calibre Viewer, Foliate and Thorium. All behave the same (and rightly so), because your CSS in styles.css is at fault, not any of the readers.

body {
  font-family: "Literata", serif;
}

body > p.p {
  margin: 1em 0 !important;
}

body > .p1.p1 {
  margin: 3em 0 !important;
}

body > .p2.p2 {
  margin-top: 3em !important;
  margin-right: 0 !important;
  margin-bottom: 3em !important;
  margin-left: 0 !important;
}

I have made a little change, removed the unneeded !important, added some text at the beginning of the paragraph CSS and made the background lightgray and the paragraph background white, so you can more easily spot what’s happening here.

body {
  font-family: "Literata", serif;
}

p {
  margin: 1em 0;
  background-color: white; /* remove when done */
}

p.p1 {
  margin: 3em 0;
  background-color: white; /* remove when done */
}

p.p2 {
  margin-top: 3em;
  margin-right: 0;
  margin-bottom: 3em;
  margin-left: 0;
  background-color: white; /* remove when done */
}

/* Show what's happening */
body {
  background-color: lightgray;
}

p::before {
  content: '(P) ';
}

p.p1::before {
  content: '(P1) ';
}

p.p2::before {
  content: '(P2) ';
}

The modified EPUB and CSS are in the attached ZIP for you to study. This version works nicely (and behaves the same) on all readers noted above. I also include actual screenshots from a Pocketbook Era, and from Foliate.

I don’t have any Pocketbook Apps here, but if they use the same (or at least a compliant) renderer in those apps, it should display the same. I’m not sure about iOS, Apple probably forces everyone to use their WebKit engine (from Safari), so for more special features you might have to use the -webkit-prefixes in addition there. Try to use as few as possible. Vendor-specific is evil. Like you say, we’ve had that with IE, back in the days.

Hint: Try to start out with easy CSS, don’t overcomplicate it.