/* Final cosmetic layer. Keep the existing content, grids and interaction hooks. */
@font-face {
  font-family: "AlMaydan Arabic";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/noto-sans-arabic-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "AlMaydan Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
html[dir="ltr"] {
  --amx-font: "AlMaydan Sans", "AlMaydan Arabic", "Segoe UI", Arial, sans-serif;
  --amx-display: var(--amx-font);
  --amx-ease: cubic-bezier(.22, 1, .36, 1);
}

html[dir="rtl"] {
  --amx-font: "AlMaydan Arabic", "AlMaydan Sans", Tahoma, Arial, sans-serif;
  --amx-display: var(--amx-font);
}

body:not(.amx-reels-page) {
  font-weight: 450;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

body:not(.amx-reels-page) :is(h1, h2, h3, h4) {
  font-weight: 700;
}

/* A quiet, consistent hierarchy for navigation and everyday controls. */
body:not(.amx-reels-page) .amx-primary-nav a {
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.55;
  transition: color 180ms ease, background-color 220ms ease, border-color 220ms ease;
}

body:not(.amx-reels-page) :is(.amx-button, .amx-text-button, .amx-section-link, .amx-install-button, .amx-footer-install) {
  font-weight: 650;
  line-height: 1.5;
}

body:not(.amx-reels-page) :is(.amx-eyebrow, .amx-hero-edition, .amx-section-kicker, .amx-page-heading__eyebrow) {
  font-weight: 650;
}

body:not(.amx-reels-page) :is(.amx-card-meta, .amx-hero-meta) {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Leave the image prominent, with a readable and more compact title block. */
body:not(.amx-reels-page) .amx-hero-content {
  padding-block: clamp(88px, 10vh, 126px) 92px;
}

body:not(.amx-reels-page) .amx-hero h1 {
  max-width: min(720px, 100%);
  margin-block: 15px 0;
  font-size: clamp(2.35rem, 3.15vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

body:not(.amx-reels-page) .amx-hero-slide--title-long h1 {
  font-size: clamp(2.1rem, 2.8vw, 3.125rem);
}

body:not(.amx-reels-page) .amx-hero-slide--title-xlong h1 {
  font-size: clamp(1.95rem, 2.55vw, 2.875rem);
}

html[dir="ltr"] body:not(.amx-reels-page) .amx-hero h1 {
  line-height: 1.2;
}

body:not(.amx-reels-page) .amx-hero-content > p {
  max-width: 620px;
  margin-block: 17px 0;
  color: rgb(255 255 255 / 80%);
  font-size: clamp(.98rem, 1.15vw, 1.125rem);
  font-weight: 450;
  line-height: 1.85;
}

body:not(.amx-reels-page) .amx-hero-actions {
  gap: 18px 24px;
  margin-block-start: 26px;
}

body:not(.amx-reels-page) .amx-hero .amx-button {
  min-height: 50px;
  padding: 12px 25px;
  font-size: .95rem;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgb(255 49 90 / 18%);
}

body:not(.amx-reels-page) .amx-hero-position {
  opacity: .8;
}

.amx-hero-slide::after {
  background:
    linear-gradient(90deg, rgb(6 7 11 / 87%) 0%, rgb(6 7 11 / 64%) 37%, rgb(6 7 11 / 18%) 75%, rgb(6 7 11 / 8%) 100%),
    linear-gradient(0deg, rgb(6 7 11 / 96%) 0%, rgb(6 7 11 / 40%) 30%, transparent 72%);
}

html[dir="rtl"] .amx-hero-slide::after {
  background:
    linear-gradient(270deg, rgb(6 7 11 / 87%) 0%, rgb(6 7 11 / 64%) 37%, rgb(6 7 11 / 18%) 75%, rgb(6 7 11 / 8%) 100%),
    linear-gradient(0deg, rgb(6 7 11 / 96%) 0%, rgb(6 7 11 / 40%) 30%, transparent 72%);
}

/* The same sections and cards, with a less exaggerated scale and spacing. */
body:not(.amx-reels-page) .amx-section {
  padding-block: clamp(56px, 5.4vw, 82px);
}

body:not(.amx-reels-page) .amx-section-heading {
  margin-block-end: clamp(24px, 2.4vw, 36px);
}

body:not(.amx-reels-page) :is(.amx-section-heading h2, .amx-page-heading h1, .amx-library__header h1, .amx-programs-home__heading h2, .amx-program-hub__heading h1) {
  font-size: clamp(1.8rem, 2.6vw, 2.625rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
}

body:not(.amx-reels-page) :is(.amx-card-title, .amx-program-card__title, .amx-episode-card__body h2) {
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  font-weight: 650;
  line-height: 1.6;
}

body:not(.amx-reels-page) .amx-card-meta {
  font-size: .75rem;
  line-height: 1.6;
}

body:not(.amx-reels-page) :is(.amx-program-showcase__content h3, .amx-program-hub-hero__content h2, .amx-program-page-hero__content h1) {
  max-width: 18ch;
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-weight: 700;
  line-height: 1.3;
}

body:not(.amx-reels-page) .amx-video-page .amx-single-header h1 {
  font-size: clamp(1.65rem, 2.7vw, 2.75rem);
  line-height: 1.4;
}

body:not(.amx-reels-page) .amx-footer-app h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.35;
}

/* Reuse the existing carousel and reveal states; no new interaction logic. */
.amx-hero-carousel .amx-hero-content {
  transform: translateY(8px);
  transition: opacity 380ms ease 70ms, transform 480ms var(--amx-ease) 70ms;
}

.amx-hero-carousel .amx-hero-slide.is-active .amx-hero-content {
  transform: none;
}

.amx-hero-carousel .amx-hero-slide.is-active .amx-hero-media img {
  animation-name: amx-polish-drift;
}

.amx-hero-slide.is-active .amx-hero-content > :is(h1, p, .amx-hero-actions) {
  animation: amx-polish-copy 520ms ease 70ms both;
}

.amx-hero-slide.is-active .amx-hero-content > p {
  animation-delay: 130ms;
}

.amx-hero-slide.is-active .amx-hero-actions {
  animation-delay: 190ms;
}

@keyframes amx-polish-copy {
  from { opacity: .25; }
  to { opacity: 1; }
}

@keyframes amx-polish-drift {
  from { transform: scale(1.01); }
  to { transform: scale(1.04); }
}

body:not(.no-js) .amx-reveal:not(.amx-hero) {
  transform: translateY(10px);
  transition: opacity 440ms ease, transform 520ms var(--amx-ease);
}

body:not(.no-js) .amx-reveal.is-visible:not(.amx-hero) {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.amx-reels-page) .amx-card:hover .amx-card-media,
  body:not(.amx-reels-page) .amx-card:focus-within .amx-card-media {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgb(0 0 0 / 16%);
  }

  body:not(.amx-reels-page) .amx-card:hover .amx-card-media img,
  body:not(.amx-reels-page) .amx-episode-card:hover .amx-episode-card__media > img {
    transform: scale(1.04);
  }
}

@media (min-width: 761px) and (max-width: 1499px) {
  body:not(.amx-reels-page) .amx-hero-content {
    width: calc(100% - 160px);
  }
}

@media (max-width: 760px) {
  .amx-hero-control {
    top: auto;
    bottom: 14px;
    transform: none;
  }

  .amx-hero-control:hover {
    transform: scale(1.05);
  }

  body:not(.amx-reels-page) .amx-hero-content {
    padding-block: 64px 102px;
  }

  body:not(.amx-reels-page) .amx-hero h1,
  body:not(.amx-reels-page) .amx-hero-slide--title-long h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 6.6vw, 2.35rem);
    line-height: 1.35;
  }

  body:not(.amx-reels-page) .amx-hero-slide--title-xlong h1 {
    font-size: clamp(1.65rem, 6vw, 2.15rem);
  }

  body:not(.amx-reels-page) .amx-hero-content > p {
    margin-block-start: 14px;
    font-size: .95rem;
    line-height: 1.8;
  }

  body:not(.amx-reels-page) .amx-hero-actions {
    gap: 12px;
    margin-block-start: 20px;
  }

  body:not(.amx-reels-page) .amx-hero .amx-button {
    min-height: 46px;
    padding: 11px 20px;
  }

  body:not(.amx-reels-page) .amx-section {
    padding-block: 46px;
  }

  body:not(.amx-reels-page) :is(.amx-section-heading h2, .amx-page-heading h1, .amx-library__header h1) {
    font-size: clamp(1.6rem, 5.4vw, 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amx-hero-slide.is-active .amx-hero-content > :is(h1, p, .amx-hero-actions) {
    animation: none !important;
  }

  .amx-hero-carousel .amx-hero-slide.is-active .amx-hero-media img {
    animation: none !important;
    transform: none !important;
  }

  .amx-hero-carousel .amx-hero-content,
  body:not(.no-js) .amx-reveal,
  body:not(.amx-reels-page) .amx-card .amx-card-media {
    transform: none !important;
    transition: none !important;
  }
}