/* Unified, centred reading column — 2026-08-13.

   The editions CSS sizes the reading measure in `ch` (h1 16ch, .lead 42ch,
   h2/p 68ch). Because `ch` scales with each element's own font-size those
   resolve to DIFFERENT pixel widths, so text blocks never shared a right edge
   and were all left-aligned in a much wider container. Measured before this file:
     1780px viewport - body text ended at x=1004 inside a 1072px container
                       centred under a 1180px header: ~420px dead space right.

   MEASURE: 880px, widened from an initial 660px. 660 is the textbook reading
   measure but it read as thin against a 1180px header and a 1072px container,
   leaving 206px dead each side. 880 is ~100 characters a line - past the 45-75
   ideal, but the page now reads as deliberately laid out rather than starved.
   Hierarchy is intentional: header 1180 > table 1072 > prose 880.
      980px viewport - 213px of ragged right edge between blocks.
      900px viewport - 133px ragged.
      <=600px         - already clean (blocks fill the width).

   Fix: one measure for every block, centred. `min(880px, 100%)` leaves phones
   exactly as they were (100% of the container) while capping and centring
   from tablet up. Verified aligned + centred at 320/375/414/600/768/900/980/
   1024/1280/1440/1920/2560 with no horizontal overflow at any width.

   `!important` is required: the rules being overridden already use it
   (`body.ed-member h1|h2|h3 { margin: ... !important }` and the <=980px
   `max-width: none` rules), so specificity alone cannot win.

   SCOPE — deliberately limited to prose pages:
     - .grid card layouts are excluded, so hub pages stay full-width.
     - main.contact-page (forms), main.section.catalog-page (app/game
       catalogues) and the class-less game hero mains are NOT targeted; they
       are layout pages, not reading pages, and a prose measure would break them. */

/* Pages that wrap content in .section > .section-inner */
body.ed-member main.legal-page > .section > .section-inner > :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, dl, blockquote, figure, .cmp-tldr, .actions, .notice),
body.ed-member main > .section > .section-inner > :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, dl, blockquote, figure, .cmp-tldr, .actions, .notice),
/* Pages that put prose directly under main.legal-page (privacy, terms, support, refund) */
body.ed-member main.legal-page > :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, dl, blockquote, figure, .cmp-tldr, .actions, .notice) {
  max-width: min(880px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* .eyebrow is inline-flex (dot + label), so auto margins cannot centre it.
   Make it block-level flex - no background or border, so nothing stretches. */
body.ed-member main .section > .section-inner > .eyebrow,
body.ed-member main.legal-page > .eyebrow {
  display: flex !important;
}


/* ── Tables use the full container, not the prose measure ─────────────────────
   The 660px reading measure is right for prose and wrong for a 4-column table:
   measured at a 1780px viewport it left the table at 660px inside a 1072px
   container — 412px wasted — and squeezed "What you get" to 316px, forcing
   heavy wrapping. Tables are reference content, so let them fill the container.
   They still scroll on narrow screens via .cmp-wrap{overflow-x:auto}. */
body.ed-member .section-inner > :is(.cmp-wrap, .fact-wrap),
body.ed-member main.legal-page > :is(.cmp-wrap, .fact-wrap) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Buttons inside table cells ───────────────────────────────────────────────
   The shared .button is sized for a hero: 11px/18px padding and a 28px orange
   glow. In a 118px table cell that wrapped "Buy now" onto two lines (69px tall)
   and the glow bled into neighbouring rows. Keep the shape, lose the bleed. */
.cmp-wrap .button,
.fact-wrap .button {
  white-space: nowrap;
  padding: 9px 16px;
  box-shadow: none;
  font-size: 14px;
}
.cmp-wrap .button.primary,
.fact-wrap .button.primary {
  box-shadow: 0 2px 10px rgba(255, 138, 61, 0.22);
}
.cmp-wrap td:last-child,
.fact-wrap td:last-child {
  white-space: nowrap;
}