/* Membership modal: vertical scrolling only. Horizontal movement is structurally impossible. */
html.mrph-membership-modal-open,
html.mrph-membership-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.premium-preview-modal {
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

.premium-preview-modal .membership-dialog.membership-dialog-refined {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: min(820px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  margin-inline: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
}

.premium-preview-modal .membership-dialog.membership-dialog-refined *,
.premium-preview-modal .membership-dialog.membership-dialog-refined *::before,
.premium-preview-modal .membership-dialog.membership-dialog-refined *::after {
  box-sizing: border-box !important;
}

.premium-preview-modal .membership-dialog-inner,
.premium-preview-modal .membership-dialog-head,
.premium-preview-modal .membership-dialog-head-copy,
.premium-preview-modal .membership-dialog-lead,
.premium-preview-modal .membership-scope,
.premium-preview-modal .membership-benefits,
.premium-preview-modal .membership-benefit,
.premium-preview-modal .membership-value,
.premium-preview-modal .membership-assurance,
.premium-preview-modal .membership-modal-actions,
.premium-preview-modal .membership-inline-message,
.premium-preview-modal .membership-modal-footnote {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.premium-preview-modal .membership-dialog-head-copy,
.premium-preview-modal .membership-benefit > div,
.premium-preview-modal .membership-value-meta,
.premium-preview-modal .membership-price {
  min-width: 0 !important;
  max-width: 100% !important;
}

.premium-preview-modal .membership-dialog h2,
.premium-preview-modal .membership-dialog p,
.premium-preview-modal .membership-benefit b,
.premium-preview-modal .membership-benefit p,
.premium-preview-modal .membership-value strong,
.premium-preview-modal .membership-value b,
.premium-preview-modal .membership-inline-message {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.premium-preview-modal .membership-eyebrow {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.premium-preview-modal .membership-scope {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.premium-preview-modal .membership-benefits {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.premium-preview-modal .membership-benefit {
  grid-template-columns: 36px minmax(0, 1fr) !important;
}

.premium-preview-modal .membership-value {
  flex-wrap: wrap !important;
}

.premium-preview-modal .membership-modal-actions {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

.premium-preview-modal .membership-main-cta,
.premium-preview-modal .membership-modal-actions .soft {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 720px) {
  .premium-preview-modal .membership-dialog.membership-dialog-refined {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .premium-preview-modal .membership-benefits,
  .premium-preview-modal .membership-modal-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}