:where(.mb-article, .mbpk-article, .mbpk-page .mb-article, .mb-topbar, .mb-site-header, .mb-page-strip, .mb-site-footer) {
  --mb-container: 1120px;
  --mb-radius: 18px;
  --mb-radius-sm: 12px;
  --mb-gap: clamp(0.9rem, 1.8vw, 1.35rem);
  --mb-gap-lg: clamp(1.1rem, 2.8vw, 2rem);
  --mb-section-space: clamp(1.4rem, 4vw, 3.2rem);

  --mb-bg: #090f1d;
  --mb-bg-soft: #0f1830;
  --mb-surface: #131f3d;
  --mb-surface-2: #1a2a52;
  --mb-border: #2b3d6f;

  --mb-text: #edf3ff;
  --mb-muted: #b8c4e4;
  --mb-title: #f7faff;

  --mb-accent: #41d1ff;
  --mb-accent-2: #7c5cff;
  --mb-warm: #f4c86b;

  --mb-shadow: 0 16px 34px rgba(2, 8, 20, 0.45);
  --mb-glow: 0 0 0 1px rgba(65, 209, 255, 0.22), 0 16px 32px rgba(65, 209, 255, 0.08);

  color: var(--mb-text);
  direction: rtl;
  text-align: right;
  font-family: "Tajawal", "Cairo", "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article),
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) *,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) *::before,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) *::after {
  box-sizing: border-box;
}

/* Root article container with explicit background */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-block: clamp(1.2rem, 2.6vw, 2.4rem);
  padding-inline: clamp(0.9rem, 2.4vw, 1.6rem);
  background:
    radial-gradient(1100px 500px at 90% -10%, rgba(65, 209, 255, 0.18) 0%, transparent 55%),
    radial-gradient(900px 400px at 0% 20%, rgba(124, 92, 255, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, #090f1d 0%, #0b1327 100%);
  color: var(--mb-text);
  line-height: 1.85;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-article__inner {
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
}

/* Typography */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--mb-title);
  line-height: 1.28;
  font-weight: 800;
  margin-block-start: 0;
  margin-block-end: 0.62em;
  overflow-wrap: anywhere;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) h1 {
  font-size: clamp(1.65rem, 3.8vw, 2.7rem);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) h2 {
  font-size: clamp(1.4rem, 3.1vw, 2rem);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(p, li, blockquote, summary) {
  margin-block: 0 1rem;
  color: var(--mb-text);
  overflow-wrap: anywhere;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) small {
  color: var(--mb-muted);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) a {
  color: var(--mb-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) a:hover {
  color: #8ee7ff;
}

/* Shared content section sizing and breathing space */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-hero, .mb-row, .mb-cta, .mb-grid, .mb-slot-grid, .mb-faq, .mb-table-wrap, .mb-section, .mb-page-strip, .mb-divider) {
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
  margin-block-start: 0;
  margin-block-end: var(--mb-section-space);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-row, .mb-hero, .mb-cta, .mb-grid, .mb-slot-grid, .mb-faq, .mb-copy, .mb-media, .mb-section) {
  overflow: visible;
}

/* Ensure no horizontal overflow from media and embedded elements */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(img, svg, video, canvas, iframe) {
  max-width: 100%;
  height: auto;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-media, .mb-media *, .mb-card__media, .mb-card__media *, .mb-hero__media, .mb-hero__media *) {
  max-width: 100%;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-row, .mb-hero, .mb-cta, .mb-grid, .mb-slot-grid, .mb-card, .mb-copy, .mb-media, .mb-hero__actions, .mb-cta__actions) > * {
  min-width: 0;
}

/* Utilities for readable narrow blocks, always centered */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-narrow, .mb-readable, .mb-measure, .mb-copy--measure) {
  width: 100%;
  max-width: min(72ch, 100%);
  margin-inline: auto;
}

/* Header / topbar / nav UI */
.mb-topbar {
  width: 100%;
  background: rgba(19, 31, 61, 0.82);
  color: var(--mb-muted, #b8c4e4);
  border: 1px solid rgba(65, 209, 255, 0.2);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  margin: 0 auto 1rem;
  max-width: var(--mb-container, 1120px);
  backdrop-filter: blur(6px);
}

.mb-site-header {
  width: 100%;
  max-width: var(--mb-container, 1120px);
  margin-inline: auto;
  margin-block: 0 1.3rem;
  padding: 0.8rem;
  border-radius: var(--mb-radius, 18px);
  background: linear-gradient(180deg, rgba(17, 29, 58, 0.95), rgba(12, 20, 42, 0.95));
  border: 1px solid rgba(65, 209, 255, 0.22);
  box-shadow: var(--mb-shadow, 0 16px 34px rgba(2, 8, 20, 0.45));
}

.mb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mb-brand {
  color: #f7faff;
  font-weight: 800;
  text-decoration: none;
}

.mb-main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mb-main-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(65, 209, 255, 0.25);
  background: rgba(26, 42, 82, 0.8);
  color: #ecf3ff;
  text-decoration: none;
  font-weight: 700;
  max-width: 100%;
}

.mb-main-nav a:hover,
.mb-main-nav a:focus-visible {
  background: rgba(65, 209, 255, 0.18);
  color: #ffffff;
}

.mb-page-strip {
  padding: clamp(0.9rem, 2.3vw, 1.45rem);
  border-radius: var(--mb-radius, 18px);
  border: 1px solid rgba(124, 92, 255, 0.3);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(65, 209, 255, 0.15));
  color: #f4f8ff;
}

.mb-site-footer {
  width: 100%;
  max-width: var(--mb-container, 1120px);
  margin-inline: auto;
  margin-block-start: 2.2rem;
  padding: 1rem;
  border: 1px solid rgba(65, 209, 255, 0.2);
  border-radius: var(--mb-radius, 18px);
  background: linear-gradient(180deg, rgba(13, 22, 45, 0.94), rgba(9, 16, 33, 0.94));
  color: var(--mb-muted, #b8c4e4);
}

.mb-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.mb-footer-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(65, 209, 255, 0.22);
  background: rgba(19, 31, 61, 0.8);
  color: #f0f5ff;
  text-decoration: none;
}

/* Hero */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-gap-lg);
  padding: clamp(0.85rem, 2.2vw, 1.4rem);
  border-radius: var(--mb-radius);
  border: 1px solid rgba(65, 209, 255, 0.22);
  background: linear-gradient(180deg, rgba(18, 30, 59, 0.9), rgba(11, 19, 39, 0.9));
  box-shadow: var(--mb-shadow);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero__media {
  order: -1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: calc(var(--mb-radius) - 4px);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: calc(var(--mb-radius) - 4px);
  border: 1px solid rgba(65, 209, 255, 0.24);
  background: rgba(9, 15, 29, 0.55);
  box-shadow: var(--mb-glow);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero__media:hover img {
  transform: scale(1.03);
  box-shadow: 0 0 0 1px rgba(65, 209, 255, 0.34), 0 18px 34px rgba(65, 209, 255, 0.14);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-badge,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero__badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 200, 107, 0.45);
  background: rgba(244, 200, 107, 0.18);
  color: #fff1cc;
  font-weight: 800;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero__copy {
  color: var(--mb-muted);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-hero__actions, .mb-cta__actions, .mb-btn-group) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Buttons */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 0.72rem 1.1rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--primary {
  background: linear-gradient(135deg, #39c8ff 0%, #6f58ff 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(65, 209, 255, 0.22);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--primary:hover,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--primary:focus-visible {
  background: linear-gradient(135deg, #4dd4ff 0%, #8168ff 100%);
  color: #ffffff;
  transform: translateY(-1px);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--secondary {
  background: rgba(26, 42, 82, 0.78);
  border: 1px solid rgba(65, 209, 255, 0.34);
  color: #e8f3ff;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--secondary:hover,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--secondary:focus-visible {
  background: rgba(65, 209, 255, 0.2);
  color: #ffffff;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--accent {
  background: #f4c86b;
  color: #2f1f00;
  box-shadow: 0 10px 24px rgba(244, 200, 107, 0.24);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--accent:hover,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn--accent:focus-visible {
  background: #ffd887;
  color: #2f1f00;
}

/* Rows */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row {
  --mb-row-pad-start: clamp(0.3rem, 1vw, 0.7rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--mb-gap-lg);
  padding: clamp(0.85rem, 2vw, 1.2rem);
  border-radius: var(--mb-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(17, 28, 55, 0.7), rgba(12, 20, 40, 0.65));
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row > :is(.mb-copy, .mb-media) {
  padding-block-start: var(--mb-row-pad-start);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-media {
  width: 100%;
  min-width: 0;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: calc(var(--mb-radius) - 4px);
  border: 1px solid rgba(65, 209, 255, 0.24);
  background: rgba(8, 13, 26, 0.55);
  box-shadow: var(--mb-glow);
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-media:hover img {
  transform: scale(1.03);
  box-shadow: 0 0 0 1px rgba(65, 209, 255, 0.32), 0 14px 28px rgba(65, 209, 255, 0.14);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row--stack,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row--long {
  grid-template-columns: minmax(0, 1fr);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row--reverse .mb-copy {
  order: 2;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row--reverse .mb-media {
  order: 1;
}

/* CTA */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-cta {
  padding: clamp(0.95rem, 2.2vw, 1.4rem);
  border-radius: var(--mb-radius);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.24), rgba(65, 209, 255, 0.2));
  border: 1px solid rgba(65, 209, 255, 0.28);
  box-shadow: var(--mb-shadow);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-cta__title {
  color: #ffffff;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-cta__copy {
  color: #e4edff;
}

/* Grids and cards */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid, .mb-slot-grid) {
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-gap-lg);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid, .mb-slot-grid) > * {
  min-width: 0;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-card, .mb-slot-card) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.7rem;
  padding: 0.85rem;
  border-radius: var(--mb-radius-sm);
  border: 1px solid rgba(65, 209, 255, 0.24);
  background: linear-gradient(180deg, rgba(20, 34, 67, 0.86), rgba(14, 24, 49, 0.88));
  box-shadow: 0 10px 24px rgba(5, 10, 25, 0.35);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-card, .mb-slot-card) :is(h3, h4, h5, p, ul, ol) {
  margin-block-end: 0.72rem;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-card__media, .mb-card__media a) {
  width: 100%;
  display: block;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-card__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: calc(var(--mb-radius-sm) - 4px);
  border: 1px solid rgba(65, 209, 255, 0.24);
  background: rgba(7, 12, 24, 0.58);
  box-shadow: var(--mb-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-card:hover, .mb-slot-card:hover) .mb-card__media img {
  transform: scale(1.04);
  box-shadow: 0 0 0 1px rgba(65, 209, 255, 0.35), 0 14px 30px rgba(65, 209, 255, 0.14);
}

/* Lists */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(ul, ol) {
  padding-inline-start: 1.25rem;
  margin-block: 0 1rem;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) li {
  margin-block-end: 0.42rem;
}

/* FAQ */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-faq {
  display: grid;
  gap: 0.7rem;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-faq details {
  border: 1px solid rgba(65, 209, 255, 0.24);
  border-radius: 12px;
  background: rgba(18, 31, 61, 0.72);
  padding: 0.75rem 0.9rem;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-faq summary {
  cursor: pointer;
  list-style-position: inside;
  font-weight: 800;
  color: #f3f8ff;
  margin: 0;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-faq details > *:last-child {
  margin-block-end: 0;
}

/* Standalone divider between sections only */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-divider,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) hr {
  border: 0;
  height: 1px;
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
  margin-block: clamp(1.2rem, 3vw, 2rem);
  background: linear-gradient(90deg, transparent, rgba(65, 209, 255, 0.52), transparent);
}

/* Required mobile-safe table scrolling */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: block;
  touch-action: pan-x;
  border: 1px solid rgba(65, 209, 255, 0.25);
  border-radius: 12px;
  background: rgba(10, 16, 33, 0.62);
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  direction: rtl;
  background: rgba(15, 25, 49, 0.86);
  color: #eff5ff;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table th,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table td {
  border: 1px solid rgba(65, 209, 255, 0.2);
  padding: 0.7rem 0.8rem;
  text-align: right;
  vertical-align: top;
}

:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table th {
  background: rgba(65, 209, 255, 0.16);
  color: #ffffff;
  font-weight: 800;
}

/* Grid breakpoints: mobile 1, tablet 2, desktop 3 */
@media (min-width: 640px) {
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid, .mb-slot-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-row:not(.mb-row--stack):not(.mb-row--long) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid, .mb-slot-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Orphan fix grid (desktop only) */
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) > :is(.mb-card, .mb-slot-card) {
    grid-column: span 2;
  }

  /* Orphan 2 cards in last row: each takes 50% (span 3 of 6) */
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) > :is(.mb-card, .mb-slot-card):nth-last-child(2):nth-child(3n + 1),
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) > :is(.mb-card, .mb-slot-card):last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }

  /* Orphan 1 card in last row: full width + 2-column inside */
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) > :is(.mb-card, .mb-slot-card):last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mb-gap);
    align-items: start;
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) > :is(.mb-card, .mb-slot-card):last-child:nth-child(3n + 1) > .mb-card__media {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-grid--orphan-fix, .mb-slot-grid--orphan-fix) > :is(.mb-card, .mb-slot-card):last-child:nth-child(3n + 1) > :not(.mb-card__media) {
    grid-column: 1;
  }
}

/* Mobile safety: buttons and actions always fit viewport */
@media (max-width: 639px) {
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) {
    padding-inline: 0.78rem;
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-hero, .mb-row, .mb-cta) {
    padding-inline: 0.78rem;
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) :is(.mb-hero__actions, .mb-cta__actions, .mb-btn-group) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table {
    min-width: 560px;
  }

  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table th,
  :where(.mb-article, .mbpk-article, .mbpk-page .mb-article) table.mb-table td {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .mb-header__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .mb-main-nav {
    width: 100%;
  }

  .mb-main-nav a,
  .mb-footer-nav a {
    width: 100%;
    max-width: 100%;
  }
}

/* Prevent figure as media containers from breaking layout (UA margins in RTL) */
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) figure.mb-media,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) figure.mb-hero__media,
:where(.mb-article, .mbpk-article, .mbpk-page .mb-article) figure.mb-card__media {
  margin: 0;
}