/* Tests: tests/AMMN.Portal.E2E/LandingPageTests.cs */
/* Docs:  docs/dev/LANDING.md */

/* --- Universal Reset --- */
:where(.ammn-landing) *,
:where(.ammn-landing) *::before,
:where(.ammn-landing) *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where(.ammn-landing) button,
:where(.ammn-landing) input,
:where(.ammn-landing) select,
:where(.ammn-landing) textarea {
  font-family: inherit;
}

body:where(:has(.ammn-landing)) {
  font-family: var(--font-body);
  background: var(--bg);
  overflow-x: hidden;
}

.ammn-landing {
  --navbar-height: 75px;
  /* Aliased to theme.tokens.css — single source of truth */
  --bg-primary: var(--bg, var(--n0));
  --text-primary: var(--text, var(--text));
  --bg-secondary: var(--surface, var(--text-muted));
  --text-secondary: var(--text-muted, var(--text-muted));
  --landing-accent-light: var(--brand-primary-bg, var(--text-muted));
  --landing-accent-dark: var(--brand-navy, var(--text-muted));
  --sys-color-one: var(--landing-theme-base, var(--brand-blue-light));
  --sys-color-one-dark: color-mix(in srgb, var(--sys-color-one), var(--text) 30%);
  --sys-color-one-darker: color-mix(in srgb, var(--sys-color-one), var(--text) 55%);
  --sys-color-one-light: color-mix(in srgb, var(--sys-color-one), var(--n0) 25%);
}

[data-theme="dark"] .ammn-landing {
  /* Dark values auto-inherited from theme.tokens.css via var() aliases above.
     Only keep overrides for vars that don't map 1:1. */
  --landing-accent-light: color-mix(in srgb, var(--landing-theme-base) 15%, var(--bg));
  --landing-accent-dark: color-mix(in srgb, var(--brand-navy) 70%, var(--bg));
  --sys-color-one-hover: color-mix(in srgb, var(--sys-color-one), var(--n0) 20%);
}

/* Dark mode toggle */

:where(.ammn-landing) .grey-mode-toggle--active {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

/* Landing page root — overflow-x and background scoped here (font now in app.css) */
.ammn-landing {
  background: var(--bg-primary);
  overflow-x: hidden;
}

/* ──────────────────────────────────────────────────────────────────
   Footer disabled store badges — uniform size across App Store,
   Google Play, and AppGallery (pre-launch state).
   ────────────────────────────────────────────────────────────────── */

/* Huawei/AppGallery — text + SVG inside the same 160×48 tile. */

/* ──────────────────────────────────────────────────────────────────
   Lighthouse CLS fix: HTML width/height attributes act as
   aspect-ratio hints only. CSS controls the actual rendered size.
   ────────────────────────────────────────────────────────────────── */

:where(.ammn-landing) .section_2imgs img,
:where(.ammn-landing) .section_2imgs_service img {
  max-width: 100%;
  height: auto;
}

:where(.ammn-landing) .pay-card img,
:where(.ammn-landing) .pay-card .mc-text {
  max-width: 100%;
}

/* Button arrow inside glass cards must keep its inline size */

/* After-insurance service logos (morni, nana, grandshift) — make them bigger.
   The HTML has width="40" height="40" which is too small. Override here. */

:where(.ammn-landing) .footer img,
:where(.ammn-landing) .footer-links a img,
:where(.ammn-landing) .footer-contact__icon {
  max-width: 100%;
  height: auto;
}

:where(.ammn-landing) .licensed-insurance-slide img,
:where(.ammn-landing) .licensed-insurance-control-btn img {
  max-width: 100%;
  height: auto;
}

/* Preserve the absolute positioning on the static card's mask image. */

:where(.ammn-landing) .topbar {
  width: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

:where(.ammn-landing) .navbar {
  max-width: 100%;
  margin: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--n900) 30%, transparent);
  backdrop-filter: blur(10px);
  position: relative;
  transition: all 0.3s ease;
}

:where(.ammn-landing) .brand img {
  transition: transform 0.3s ease;
  width: 120px;
  height: 38px;
}

/* ── Services sub-nav bar ─────────────────────────── */
:where(.ammn-landing) .services-chevron--open {
  transform: rotate(180deg);
}

:where(.ammn-landing) .services-bar {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: color-mix(in srgb, var(--n900) 50%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--n0) 8%, transparent);
  display: none;
}

:where(.ammn-landing) .services-bar--open {
  display: block;
  animation: services-bar-slide 0.25s ease-out;
}

@keyframes services-bar-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] :where(.ammn-landing) .services-bar {
  background-color: color-mix(in srgb, var(--n0) 70%, transparent);
  border-bottom-color: color-mix(in srgb, var(--n900) 12%, transparent);
}

/* Language toggle on landing dark navbar */

:where(.ammn-landing) .hero {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  position: relative;
  padding-top: 54px;
  margin-top: 0;
  overflow: hidden;
  background-color: var(--landing-accent-dark);
  background-image: url("../assets/landing/hero/hero-bg-pattern.webp");
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.ammn-landing) .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: gradientShift 15s ease infinite;
  z-index: 1;
}

@keyframes gradientShift {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.5;
  }
}

:where(.ammn-landing) .hero-slide {
  width: 100%;
  height: calc(100vh - 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 60px;
  animation: fadeInSlide 0.8s ease-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out,
    visibility 0.6s ease-in-out;
  pointer-events: none;
}

:where(.ammn-landing) .hero-slide:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

:where(.ammn-landing) .hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* ── Hero slide 1 (AMMN shield logo): scale down so it doesn't fill
   the entire hero-image container ── */

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(.ammn-landing) .hero-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.4s both;
}

:where(.ammn-landing) .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--n0);
  height: 52px;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0.7px solid color-mix(in srgb, var(--n0) 30%, transparent);
}

:where(.ammn-landing) .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 0.7px;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--n0) 60%, transparent) 0,
      color-mix(in srgb, var(--n0) 0%, transparent) 50.07%,
      color-mix(in srgb, var(--n0) 40%, transparent) 100%);
  -webkit-mask: linear-gradient(var(--n0) 0 0) content-box,
    linear-gradient(var(--n0) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--n0) 0 0) content-box,
    linear-gradient(var(--n0) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

:where(.ammn-landing) .btn-primary:hover {
  background: color-mix(in srgb, var(--n0) 28%, transparent);
  box-shadow: var(--shadow-md);
}

:where(.ammn-landing) .btn-secondary {
  color: var(--n0);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  isolation: isolate;
  background: color-mix(in srgb, var(--n0) 12%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  border: none;
}

:where(.ammn-landing) .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

:where(.ammn-landing) .btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 0.7px;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--n0) 60%, transparent) 0,
      color-mix(in srgb, var(--n0) 0%, transparent) 50.07%,
      color-mix(in srgb, var(--n0) 40%, transparent) 100%);
  -webkit-mask: linear-gradient(var(--n0) 0 0) content-box,
    linear-gradient(var(--n0) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--n0) 0 0) content-box,
    linear-gradient(var(--n0) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* Hero arrows: replace PNG with clean SVGs */

:where(.ammn-landing) .inside {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0 0 0;
}

:where(.ammn-landing) .inside h1,
:where(.ammn-landing) .inside h2 {
  margin-left: 90px;
  font-weight: 500;
  font-style: Medium;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -3%;
}

:where(.ammn-landing) .inside p {
  margin-left: 90px;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5%;
}

:where(.ammn-landing) .section_2 {
  position: relative;
  margin-top: -190px;
  background-color: var(--bg-primary);
  z-index: 1;
  padding-top: 190px;
  clip-path: ellipse(100% 100% at 50% 100%);
}

:where(.ammn-landing) .section_2imgs {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 60px 0;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      var(--text) 10%,
      var(--text) 90%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      var(--text) 10%,
      var(--text) 90%,
      transparent 100%);
}

[data-theme="dark"] :where(.ammn-landing) .section_2imgs img,
[data-theme="dark"] :where(.ammn-landing) .section_2imgs_service img {
  filter: none;
}

:where(.ammn-landing) .scroll-track {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: scroll-infinite 30s linear infinite;
  width: fit-content;
  will-change: transform;
}

@keyframes scroll-infinite {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-1 * var(--total-width, 1500px) / 2));
  }
}

:where(.ammn-landing) .img-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

:where(.ammn-landing) .img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

:where(.ammn-landing) .blue-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7) rotate(-30deg);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 10;
}

:where(.ammn-landing) .blue-overlay.active {
  transform: translate(-50%, -50%) scale(0.7) rotate(-8deg);
  opacity: 1;
}

:where(.ammn-landing) .hover-card {
  min-width: 180px;
  min-height: 180px;
  background: linear-gradient(135deg, var(--landing-800) 0, var(--landing-600) 50%, var(--landing-theme-base) 100%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

:where(.ammn-landing) .hover-card img {
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 2;
}

:where(.ammn-landing) .img-wrapper:hover {
  transform: scale(1.05);
}

:where(.ammn-landing) .img-wrapper:hover>img {
  opacity: 0;
}

:where(.ammn-landing) .img-wrapper:hover .blue-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

:where(.ammn-landing) .scroll-track:hover {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  :where(.ammn-landing) .img-wrapper {
    width: 150px;
    height: 90px;
  }

  :where(.ammn-landing) .hover-card {
    min-width: 160px;
    min-height: 160px;
  }

  :where(.ammn-landing) .hover-card img {
    max-width: 120px;
    max-height: 120px;
  }
}

:where(.ammn-landing) .pay-text {
  position: relative;
  min-height: 80px;
  text-align: center;
  transition: all 750ms cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 2;
}

:where(.ammn-landing) .pay-text p {
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  max-width: 900px;
  margin: 0;
  min-height: calc(48px * 2);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 750ms cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.ammn-landing) .mini-logo {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  transition: all 750ms cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 1;
  position: absolute;
  left: 0;
  z-index: 1;
}

:where(.ammn-landing) .mini-logo.l1 {
  left: calc(50% - 182px + 0 * (40px + 12px));
}

:where(.ammn-landing) .mini-logo.l2 {
  left: calc(50% - 182px + 1 * (40px + 12px));
}

:where(.ammn-landing) .mini-logo.l3 {
  left: calc(50% - 182px + 2 * (40px + 12px));
}

:where(.ammn-landing) .mini-logo.l4 {
  left: calc(50% - 182px + 3 * (40px + 12px));
}

:where(.ammn-landing) .mini-logo.l5 {
  left: calc(50% - 182px + 4 * (40px + 12px));
}

:where(.ammn-landing) .mini-logo.l6 {
  left: calc(50% - 182px + 5 * (40px + 12px));
}

:where(.ammn-landing) .mini-logo.l7 {
  left: calc(50% - 182px + 6 * (40px + 12px));
}

/* Mini-logo SVG content replacements */
:where(.ammn-landing) .mini-logo.l1 {
  content: url("../assets/landing/payment/sadad-logo.svg");
}

:where(.ammn-landing) .mini-logo.l2 {
  content: url("../assets/landing/payment/mastercard-logo.svg");
}

:where(.ammn-landing) .mini-logo.l3 {
  content: url("../assets/landing/payment/visa-logo.svg");
}

:where(.ammn-landing) .mini-logo.l4 {
  content: url("../assets/landing/payment/mada-logo.svg");
}

:where(.ammn-landing) .mini-logo.l5 {
  content: url("../assets/landing/payment/apple-logo.svg");
}

:where(.ammn-landing) .mini-logo.l6 {
  content: url("../assets/landing/payment/mis-logo.svg");
}

:where(.ammn-landing) .mini-logo.l7 {
  content: url("../assets/landing/payment/tabby-logo.svg");
}

/* Ensure replaced content fills the circle fully */
:where(.ammn-landing) .mini-logo {
  object-fit: cover;
  padding: 0;
  background: var(--n0);
  border: 1px solid var(--n70, #e5e5e5);
  overflow: hidden;
}

:where(.ammn-landing) .pay-card {
  display: flex;
  position: absolute;
  width: 206px;
  height: 206px;
  border-radius: 14px;
  transition: transform 750ms cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 750ms cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
  transform-style: preserve-3d;
  filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--n900) 15%, transparent));
  will-change: transform, filter;
}

/* Full-card SVG content (each SVG includes its own colored card frame). */
:where(.ammn-landing) .pay-card.c1 img {
  content: url("../assets/landing/payment/mada-card.svg");
}

:where(.ammn-landing) .pay-card.c2 img {
  content: url("../assets/landing/payment/visa-card.svg");
}

:where(.ammn-landing) .pay-card.c4 img {
  content: url("../assets/landing/payment/applepay-card.svg");
}

:where(.ammn-landing) .pay-card.c5 img {
  content: url("../assets/landing/payment/sadad-card.svg");
}

:where(.ammn-landing) .pay-card.c6 img {
  content: url("../assets/landing/payment/tabby-card.svg");
}

:where(.ammn-landing) .pay-card.c7 img {
  content: url("../assets/landing/payment/mis-card.svg");
}

/* Cards: SVG fills frame; backgrounds transparent so card SVG controls visuals. */
:where(.ammn-landing) .pay-card.c1,
:where(.ammn-landing) .pay-card.c2,
:where(.ammn-landing) .pay-card.c3,
:where(.ammn-landing) .pay-card.c4,
:where(.ammn-landing) .pay-card.c5,
:where(.ammn-landing) .pay-card.c6,
:where(.ammn-landing) .pay-card.c7 {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

:where(.ammn-landing) .pay-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  align-self: center;
  margin: auto;
}

/* Mastercard c3 layout (uses .mc-text element after hiding mc-one/mc-two). */
:where(.ammn-landing) .pay-card.c3 {
  flex-direction: row;
}

:where(.ammn-landing) .pay-card.c3 div {
  display: none;
}

:where(.ammn-landing) .pay-card:hover {
  filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--n900) 35%, transparent));
}

@media (max-width: 768px) {
  :where(.ammn-landing) .pay-text p {
    font-size: 16px;
  }

  :where(.ammn-landing) .pay-card {
    width: 100px;
  }
}

@media (max-width: 950px) {
  :where(.ammn-landing) .pay-text p {
    font-size: 24px;
  }

  }

:where(.ammn-landing) .content {
  position: relative;
  z-index: 5;
  max-width: 1440px;
  margin: auto;
}

:where(.ammn-landing) .carousel-slide {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  height: 532px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  width: 277px;
  opacity: 0.6;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

:where(.ammn-landing) .carousel-slide.active {
  width: 1000px;
  height: 532px;
  max-width: calc(100vw - 200px);
  opacity: 1;
  cursor: default;
  z-index: 2;
  transform: translateZ(0) scale(1);
}

:where(.ammn-landing) .carousel-slide.next-visible {
  opacity: 0.8;
  width: 327px;
}

:where(.ammn-landing) .slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.ammn-landing) .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--text) 90%, transparent) 0, transparent 60%);
}

:where(.ammn-landing) .slide-title {
  position: absolute;
  bottom: 44px;
  left: 48px;
  font-size: 36px;
  font-weight: 500;
  color: linear-gradient(93.45deg, var(--n0) 54.99%, var(--n200) 89.13%);
  z-index: 2;
  opacity: 0;
}

:where(.ammn-landing) .carousel-slide.active .slide-title {
  opacity: 1;
}

:where(.ammn-landing) .info-box-content {
  transition: opacity 0.3s ease,
    transform 0.3s ease;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

:where(.ammn-landing) .info-box-content.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

:where(.ammn-landing) .button {
  width: 154px;
  height: 52px;
  padding: 20px 24px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.ammn-landing) .btn-left {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

:where(.ammn-landing) .btn-left:hover {
  background: var(--bg-primary);
  border-color: color-mix(in srgb, var(--n0) 80%, transparent);
  transform: translateY(-2px);
}

:where(.ammn-landing) .btn-right {
  background: color-mix(in srgb, var(--n0) 12%, transparent);
  color: var(--n10);
  border: 0.7px solid;
  border-image-source: linear-gradient(135deg,
      color-mix(in srgb, var(--n0) 60%, transparent) 0%,
      color-mix(in srgb, var(--n0) 0%, transparent) 50.07%,
      color-mix(in srgb, var(--n0) 40%, transparent) 100%);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  padding: 20px 24px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

:where(.ammn-landing) .btn-right span {
  margin-left: 4px;
}

:where(.ammn-landing) .btn-right:hover {
  border-color: color-mix(in srgb, var(--n0) 80%, transparent);
  transform: translateY(-2px);
}

/* Insurance carousel arrows: replace PNG with SVG */

:where(.ammn-landing) .dott {
  height: 8px;
  width: 8px;
  min-width: 8px;
  flex-shrink: 0;
  border-radius: 33px;
  background: var(--surface);
  cursor: pointer;
  transition: width 0.3s ease,
    background 0.3s ease;
}

:where(.ammn-landing) .dott.active {
  width: 50px;
  background: var(--bg-primary);
}

:where(.ammn-landing) .dott:hover {
  background: var(--bg-primary)fffb7;
}

@media (max-width: 1400px) {
  :where(.ammn-landing) .carousel-slide.active {
    width: 600px;
  }

  }

@media (max-width: 1200px) {

  :where(.ammn-landing) .carousel-slide.active {
    width: 500px;
  }

  }

@media (max-width: 968px) {
  :where(.ammn-landing) .content {
    margin-top: 24px;
  }

  /* Swipe affordance — pulsing chevrons hint at horizontal scroll */

  :where(.ammn-landing) .mobile-image-slide {
    flex-shrink: 0;
    width: calc(100vw - 48px - 60px);
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.5s ease;
    opacity: 0.5;
    box-shadow: var(--shadow-md);
  }

  :where(.ammn-landing) .mobile-image-slide.active {
    transform: scale(1);
    opacity: 1;
  }

  :where(.ammn-landing) .mobile-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  :where(.ammn-landing) .mobile-dot {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--n0) 40%, transparent);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 24px;
  }

  :where(.ammn-landing) .mobile-dot.active {
    width: 40px;
    background: var(--bg-primary);
  }

  :where(.ammn-landing) .mobile-buy-button {
    width: 100%;
    padding: 16px;
    background: var(--bg-primary);
    color: var(--brand-blue-dark);
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.3s ease;
  }

  :where(.ammn-landing) .mobile-buy-button:active {
    transform: scale(0.98);
  }

  :where(.ammn-landing) .mobile-explore-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--n0);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  :where(.ammn-landing) .mobile-explore-link:hover {
    opacity: 0.8;
  }

  :where(.ammn-landing) .mobile-explore-link svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  
  :where(.ammn-landing) .mobile-image-slide {
    width: calc(100vw - 48px - 40px);
    height: 240px;
  }

  }

:where(.ammn-landing) #motorProgressFill {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

:where(.ammn-landing) .motor-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Riyal SVG icon inline display */

/* Ensure pill text is not clipped */
:where(.ammn-landing) #motorpill-leftone,
:where(.ammn-landing) #motorpill-lefttwo {
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

:where(.ammn-landing) .arrow-right {
  transform: translate(-4px, -2px);
}

@media (max-width: 1399px) {
  
  :where(.ammn-landing) .motor-cards {
    gap: 20px;
  }
}

@media (max-width: 1199px) {

  :where(.ammn-landing) .motor-cards {
    gap: 20px;
  }

  }

@media (max-width: 1023px) {

  :where(.ammn-landing) .motor-cards {
    gap: 24px;
  }

  }

@media (max-width: 767px) {

  :where(.ammn-landing) .motor-cards {
    gap: 20px;
    padding: 0;
  }

  :where(.ammn-landing) #motorpill-leftone,
:where(.ammn-landing) #motorpill-lefttwo,
:where(.ammn-landing) .motor-pill .left {
    padding: 0 40px 0 16px;
  }

  }

:where(.ammn-landing) .cards {
  padding: 50px 0;
  cursor: grab;
  user-select: none;
}

:where(.ammn-landing) .cards:active {
  cursor: grabbing;
}

:where(.ammn-landing) .p {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  padding-left: 80px;
}

:where(.ammn-landing) .features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 50px;
  margin-top: 28px;
}

:where(.ammn-landing) .lis-nav-btn {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: var(--landing-accent-light);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(6.699999809265137px);
  box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-sm);
  pointer-events: all;
}

:where(.ammn-landing) .lis-nav-btn svg {
  color: var(--text-primary);
}

:where(.ammn-landing) .buttons {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
}

@media (max-width: 1300px) {

  :where(.ammn-landing) .cards-h1,
:where(.ammn-landing) .p {
    padding-left: 80px;
  }

  :where(.ammn-landing) .features {
    margin-bottom: 0;
  }

  :where(.ammn-landing) .buttons {
    width: 85%;
  }
}

@media (max-width: 1094px) {

  :where(.ammn-landing) .cards-h1,
:where(.ammn-landing) .p {
    padding-left: 20px;
    padding-right: 20px;
  }

  :where(.ammn-landing) .features {
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    margin-bottom: 30px;
    width: fit-content;
  }

  :where(.ammn-landing) .buttons {
    position: relative;
    top: 0;
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  }

@media (width<575px) {

  :where(.ammn-landing) .features {
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    display: flex;
    margin-bottom: 30px;
    flex-direction: column;
  }

  :where(.ammn-landing) .buttons {
    position: relative;
    top: 0;
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  }

:where(.ammn-landing) #glass-first-card button,
:where(.ammn-landing) #glass-second-card button,
:where(.ammn-landing) #glass-third-card button {
  position: relative;
  background-color: var(--brand-primary);
  padding: 20px 35px;
  overflow: hidden;
  border: 0.7px solid transparent;
  background-image: linear-gradient(var(--brand-primary), var(--brand-primary)),
    linear-gradient(180deg,
      color-mix(in srgb, var(--n0) 60%, transparent) 0,
      color-mix(in srgb, var(--n0) 0%, transparent) 50%,
      color-mix(in srgb, var(--n0) 40%, transparent) 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.ammn-landing) #glass-first-card button:hover,
:where(.ammn-landing) #glass-second-card button:hover,
:where(.ammn-landing) #glass-third-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--n900) 25%, transparent);
}

:where(.ammn-landing) .four {
  height: 890px;
  width: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom,
      var(--n0) 0,
      color-mix(in srgb, var(--n0) 90%, transparent) 14%,
      color-mix(in srgb, var(--n0) 70%, transparent) 26%,
      color-mix(in srgb, var(--n0) 35%, transparent) 34%,
      color-mix(in srgb, var(--n0) 0%, transparent) 42%,
      color-mix(in srgb, var(--n0) 0%, transparent) 70%,
      color-mix(in srgb, var(--n0) 40%, transparent) 78%,
      color-mix(in srgb, var(--n0) 85%, transparent) 92%,
      var(--n0) 100%),
    url("../assets/landing/why-ammn/why-ammn-bg.webp");
  background-size: cover;
  background-position: center 100%;
  background-repeat: no-repeat;
  position: relative;
}

/* Slight blur on the background image */
:where(.ammn-landing) .four::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: 0;
}

/* Push the content (logo + text) up */
:where(.ammn-landing) .four .upper {
  position: relative;
  z-index: 1;
  margin-top: -80px;
}

:where(.ammn-landing) .upper {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 50px;
  padding: 0 20px;
}

:where(.ammn-landing) .upper img {
  margin-bottom: 24px;
  width: 56px;
  height: auto;
}

:where(.ammn-landing) .upper h1 {
  font-size: clamp(28px, 5vw, 42px);
  color: var(--text-primary);
  margin-bottom: 20px;
  font-weight: 500;
}

:where(.ammn-landing) .upper p {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.25;
  color: var(--text-primary);
  max-width: 1000px;
}

:where(.ammn-landing) .cards-stack {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: auto;
  min-height: 160px;
  margin: 0 auto;
}

:where(.ammn-landing) .secondpart {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 20px;
  background: radial-gradient(250px 200px at -13% -28%,
      var(--bg),
      var(--surface) 22%,
      var(--surface) 36%,
      var(--surface) 52%,
      var(--surface) 62%,
      transparent 80%),
    radial-gradient(380px 220px at 118% 128%,
      var(--surface),
      var(--surface) 40%,
      var(--surface) 55%,
      transparent 78%),
    var(--sys-color-one-dark);
  background-blend-mode: screen;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--sys-color-one-dark) 25%, transparent),
    0 4px 12px color-mix(in srgb, var(--sys-color-one-dark) 18%, transparent);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}

:where(.ammn-landing) .secondpart {
  opacity: 0;
  transform: translateY(180px);
  pointer-events: none;
}

:where(.ammn-landing) .secondpart.initial {
  transform: translateY(180px) scale(0.85);
}

:where(.ammn-landing) .secondpart.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

:where(.ammn-landing) .secondpart.stacked-1 {
  transform: translateY(20px) scale(0.94);
  opacity: 0.5;
  pointer-events: none;
}

:where(.ammn-landing) .secondpart.stacked-2 {
  transform: translateY(40px) scale(0.88);
  opacity: 0.3;
  pointer-events: none;
}

:where(.ammn-landing) .secondpart.stacked-3 {
  transform: translateY(60px) scale(0.82);
  opacity: 0.15;
  pointer-events: none;
}

:where(.ammn-landing) .secondpart:first-child {
  z-index: 1;
}

:where(.ammn-landing) .secondpart:nth-child(2) {
  z-index: 2;
}

:where(.ammn-landing) .secondpart:nth-child(3) {
  z-index: 3;
}

:where(.ammn-landing) .secondpart:nth-child(4) {
  z-index: 4;
}

:where(.ammn-landing) .secondpart img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
}

/* SVG card replacements — override radial-gradient backgrounds */
:where(.ammn-landing) .secondpart {
  background-blend-mode: normal;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 14px;
  height: 108px;
  padding: 0 32px 0 140px;
  display: flex;
  align-items: center;
  gap: 0;
  box-shadow: none;
  border: none;
  background-color: transparent;
}

/* Hide the old PNG icon — the SVG card has its own built-in icon */
:where(.ammn-landing) .cards-stack .secondpart > img,
:where(.ammn-landing) .secondpart > img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Assign each card its SVG background */
:where(.ammn-landing) .secondpart[data-index="0"] {
  background: url("../assets/landing/why-ammn/Card_1.svg") center / 100% 100% no-repeat;
}

:where(.ammn-landing) .secondpart[data-index="1"] {
  background: url("../assets/landing/why-ammn/Card_2.svg") center / 100% 100% no-repeat;
}

:where(.ammn-landing) .secondpart[data-index="2"] {
  background: url("../assets/landing/why-ammn/Card_3.svg") center / 100% 100% no-repeat;
}

:where(.ammn-landing) .secondpart[data-index="3"] {
  background: url("../assets/landing/why-ammn/Card_4.svg") center / 100% 100% no-repeat;
}

/* Text stays white on the blue card */
:where(.ammn-landing) .secondpart .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(.ammn-landing) .secondpart h1,
:where(.ammn-landing) .secondpart h3 {
  color: var(--n0);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}

:where(.ammn-landing) .secondpart p {
  color: color-mix(in srgb, var(--n0) 85%, transparent);
  font-size: 14px;
  line-height: 1.4;
}

/* Adjust stacking offsets for the shorter cards */
:where(.ammn-landing) .secondpart.stacked-1 {
  transform: translateY(16px) scale(0.96);
}

:where(.ammn-landing) .secondpart.stacked-2 {
  transform: translateY(32px) scale(0.92);
}

:where(.ammn-landing) .secondpart.stacked-3 {
  transform: translateY(48px) scale(0.88);
}

/* Why AMMN section sits over a FIXED light background image (why-ammn-bg.webp)
   in both themes, so its heading/description must stay dark in dark mode too.
   (Was #ffffff -> white text on the light image = unreadable.) */
html[data-theme="dark"] :where(.ammn-landing) .upper p,
html[data-theme="dark"] :where(.ammn-landing) .upper h1,
html[data-theme="dark"] :where(.ammn-landing) .upper h2 {
  color: #1a1a2e;
}

/* Hide the "After Insurance" partners section entirely (static + Blazor mirror). */

/* Locked "Coming Soon" buttons — hero primary + carousel "Buy Now" for products
   that are not yet purchasable (everything except Motor & Medical). Visually
   disabled and non-interactive (pointer-events:none also covers <a> with href). */
:where(.ammn-landing) .btn-soon,
:where(.ammn-landing) .btn-soon:hover,
:where(.ammn-landing) .btn-soon:focus {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  filter: grayscale(40%);
  box-shadow: none !important;
  transform: none !important;
}

:where(.ammn-landing) .text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.ammn-landing) .secondpart h1 {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 600;
  color: var(--n0);
  line-height: 1.3;
}

:where(.ammn-landing) .secondpart p {
  font-size: clamp(14px, 2vw, 15.5px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--n0) 92%, transparent);
}

@media (max-width: 768px) {
  :where(.ammn-landing) .four {
    padding: 40px 16px;
  }

  :where(.ammn-landing) .upper {
    margin-bottom: 40px;
  }

  :where(.ammn-landing) .cards-stack {
    height: 280px;
  }

  :where(.ammn-landing) .secondpart {
    padding: 24px 24px;
    gap: 18px;
  }

  :where(.ammn-landing) .secondpart img {
    width: 56px;
    height: 56px;
  }

  :where(.ammn-landing) .secondpart.stacked-1 {
    transform: translateY(16px) scale(0.95);
  }

  :where(.ammn-landing) .secondpart.stacked-2 {
    transform: translateY(32px) scale(0.9);
  }

  :where(.ammn-landing) .secondpart.stacked-3 {
    transform: translateY(48px) scale(0.85);
  }
}

@media (max-width: 480px) {
  
  :where(.ammn-landing) .four {
    padding: 30px 12px;
    border-radius: 16px;
  }

  :where(.ammn-landing) .upper {
    margin-bottom: 30px;
    padding: 0 12px;
  }

  :where(.ammn-landing) .upper img {
    width: 48px;
  }

  :where(.ammn-landing) .cards-stack {
    height: 360px;
    padding: 0 12px;
  }

  :where(.ammn-landing) .secondpart {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 18px;
    gap: 8px;
    border-radius: 14px;
    height: auto !important;
    min-height: 0 !important;
    /* Drop the desktop SVG card background — icon was baked into the SVG art
       in the side-position; vertical stacking on mobile pushes it off-frame. */
    background-image: none !important;
    background-color: #2563eb !important;
  }

  /* Re-show the per-card PNG icon hidden by the desktop SVG-bg approach. */
  :where(.ammn-landing) .cards-stack .secondpart > img,
:where(.ammn-landing) .secondpart > img {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    visibility: visible !important;
    position: relative !important;
    pointer-events: auto !important;
    object-fit: contain !important;
  }

  :where(.ammn-landing) .secondpart h1,
:where(.ammn-landing) .secondpart h3 {
    margin-bottom: 2px !important;
  }

  :where(.ammn-landing) .text {
    align-items: center;
  }

  :where(.ammn-landing) .secondpart.stacked-1 {
    transform: translateY(20px) scale(0.94);
  }

  :where(.ammn-landing) .secondpart.stacked-2 {
    transform: translateY(40px) scale(0.88);
  }

  :where(.ammn-landing) .secondpart.stacked-3 {
    transform: translateY(60px) scale(0.82);
  }
}

/* Dark mode — licensed card text */

:where(.ammn-landing) .licensed-insurance-slide {
  position: absolute;
  width: 223px;
  height: 223px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  left: 0;
  top: 0;
  cursor: grab;
  transform: translate(0, 0) scale(1);
  opacity: 0;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
    opacity 0.8s cubic-bezier(0.2, 0, 0.2, 1);
  transform-style: preserve-3d;
}

:where(.ammn-landing) .no-transition {
  transition: none !important;
  animation: none !important;
}

:where(.ammn-landing) .fading-in {
  opacity: 0 !important;
}

:where(.ammn-landing) .licensed-insurance-slide:active {
  cursor: grabbing;
}

:where(.ammn-landing) .licensed-insurance-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--n0) 80%, transparent) 0, color-mix(in srgb, var(--n0) 0%, transparent) 50%);
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

:where(.ammn-landing) .licensed-insurance-slide:hover::before {
  opacity: 1;
}

:where(.ammn-landing) .licensed-insurance-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 24px;
  transition: transform 0.3s ease;
  display: block;
  transform: rotate(1deg);
}

:where(.ammn-landing) .licensed-insurance-slide:hover img {
  transform: scale(1.02);
}

:where(.ammn-landing) .initial-stack .licensed-pos-front {
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  opacity: 1;
  z-index: 3;
}

:where(.ammn-landing) .initial-stack .licensed-pos-back {
  transform: translate(0, 0) scale(0.95) rotate(12deg) !important;
  opacity: 0;
  z-index: 1;
}

:where(.ammn-landing) .licensed-pos-front {
  z-index: 3;
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
}

:where(.ammn-landing) .licensed-pos-back {
  z-index: 1;
  transform: translate(0, 0) rotate(12deg) scale(0.95);
  opacity: 0;
}

:where(.ammn-landing) .licensed-slide-exit-left {
  z-index: 4 !important;
  animation: exitLeft 0.8s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes exitLeft {
  0% {
    transform: translate(0, 0) rotate(-3deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-100%, 0) rotate(-15deg) scale(0.9);
    opacity: 0;
  }
}

:where(.ammn-landing) .licensed-slide-enter-up {
  z-index: 3 !important;
  animation: zoomUpTilt 0.9s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes zoomUpTilt {
  0% {
    transform: translate(0, 0) scale(0.95) rotate(12deg);
  }

  50% {
    transform: translate(0, 0) scale(1.15) rotate(0);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(-3deg);
    opacity: 1;
  }
}

:where(.ammn-landing) .licensed-slide-exit-right {
  z-index: 4 !important;
  animation: exitRight 0.8s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes exitRight {
  0% {
    transform: translate(0, 0) rotate(-3deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(100%, 0) rotate(15deg) scale(0.9);
    opacity: 0;
  }
}

:where(.ammn-landing) .licensed-insurance-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* Licensed arrows: replace PNG with SVG */

/* Licensed lightbox — fullscreen certificate viewer */
:where(.ammn-landing) .licensed-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lightbox-fade-in 0.25s ease;
}
:where(.ammn-landing) .licensed-lightbox--open {
  display: flex;
}
:where(.ammn-landing) .licensed-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}
:where(.ammn-landing) .licensed-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}
:where(.ammn-landing) .licensed-lightbox__close:hover {
  opacity: 1;
}
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

:where(.ammn-landing) .faq-chip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--bg-primary);
  border: 1px solid var(--n70);
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.4;
  transform: scale(0.9);
  transition: all 0.4s ease;
}

:where(.ammn-landing) .faq-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:where(.ammn-landing) .faq-chip.active {
  background: linear-gradient(45deg, var(--sys-color-one), var(--sys-color-one-dark));
  flex-shrink: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  color: var(--n0);
  border: none !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--sys-color-one) 35%, transparent) !important;
  opacity: 1;
  transform: scale(1.05);
  width: auto !important;
}

:where(.ammn-landing) .cta {
  background: var(--landing-accent-dark);
  position: relative;
  overflow: hidden;
  height: 600px;
  width: 100%;
}

/* CTA logos: replace each with payment mini-logo SVGs */

:where(.ammn-landing) .base {
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 800px) {
  :where(.ammn-landing) .cta {
    height: auto;
    padding-bottom: 300px;
  }

  :where(.ammn-landing) .base {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 420px;
  }

}

:where(.ammn-landing) .footer {
  background: var(--bg-primary);
  background-repeat: no-repeat;
  padding: 80px 80px 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
  border-radius: 40px 40px 0 0;
  margin: -40px 40px 0;
  z-index: 10;
  background-image: none;
  /* Vector 3.png not available in design assets */
  background-position: right;
}

:where(.ammn-landing) .logo-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* Footer logo: replace icon+text with SVG asset */

/* Instagram / X / LinkedIn ship as self-contained brand tiles (background baked
   into the SVG), so the wrapper is transparent and the icon fills the whole
   45×45 box. Facebook keeps its CSS-painted blue tile + small white mark. */

@media (max-width: 1024px) {
  
  :where(.ammn-landing) .footer {
    padding: 40px 40px 20px;
  }
}

@media (max-width: 640px) {
  
  :where(.ammn-landing) .footer {
    padding: 30px 20px 20px;
    margin: -40px 12px 0;
    border-radius: 24px 24px 0 0;
  }

  }

/* ==========================================================================
   INLINE STYLE REPLACEMENTS
   Replaces inline styles removed from HTML for governance compliance.
   ========================================================================== */

/* Domestic helper hero image needs narrower width */

/* After-insurance "Know More" link styling (replaces inline text-decoration/color) */

/* ==========================================================================
   MOBILE RESPONSIVE FIXES
   Critical fixes for mobile-first experience (80% mobile users).
   ========================================================================== */

/* --- Mobile Navigation (hamburger menu activation) --- */

/* --- Hero section mobile --- */
@media (max-width: 768px) {
  :where(.ammn-landing) .hero {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 40px;
  }

  :where(.ammn-landing) .hero-slide {
    min-height: auto;
    padding: 20px 16px 60px;
  }

  :where(.ammn-landing) .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  :where(.ammn-landing) .btn-primary,
:where(.ammn-landing) .btn-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* --- Partners section mobile --- */
@media (max-width: 768px) {
  :where(.ammn-landing) .section_2 {
    margin-top: -100px;
    padding-top: 100px;
  }

  :where(.ammn-landing) .inside h1,
:where(.ammn-landing) .inside h2 {
    margin-left: 20px;
    font-size: 30px;
    line-height: 38px;
  }

  :where(.ammn-landing) .inside p {
    margin-left: 20px;
    font-size: 14px;
  }
}

/* --- Payment section mobile (card fan) --- */
@media (max-width: 639px) {
  
  :where(.ammn-landing) .pay-text p {
    font-size: 18px;
    line-height: 26px;
  }

  :where(.ammn-landing) .pay-card {
    width: 80px;
    height: 80px;
    border-radius: 10px;
  }

  :where(.ammn-landing) .mini-logo {
    width: 32px;
    height: 32px;
  }
}

/* --- Insurance section (already has mobile carousel, just fix height) --- */

/* --- Motor steps mobile — single column on small screens --- */
@media (max-width: 639px) {
  :where(.ammn-landing) .motor-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  }

/* --- After insurance section mobile --- */

/* --- Why AMMN section mobile --- */
@media (max-width: 480px) {
  :where(.ammn-landing) .four {
    height: auto;
    padding: 30px 16px;
  }

  :where(.ammn-landing) .upper p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* --- Licensed section mobile --- */

/* --- FAQ section mobile --- */

/* --- CTA section mobile --- */
@media (max-width: 640px) {
  :where(.ammn-landing) .cta {
    height: auto;
    padding-bottom: 240px;
  }

  :where(.ammn-landing) .base {
    height: 320px;
  }
}

/* --- Prevent horizontal scroll globally on mobile --- */
@media (max-width: 768px) {
  body:where(:has(.ammn-landing)) {
    overflow-x: hidden;
  }

  :where(.ammn-landing) .topbar {
    padding: 8px 10px;
    top: 5px;
  }

  :where(.ammn-landing) .navbar {
    padding: 8px 16px;
    height: 50px;
  }
}

/* ========== Static Pages ========== */
:where(.ammn-landing) .static-page {
  min-height: 60vh;
  padding: 120px 24px 60px;
  max-width: 900px;
  margin: 0 auto;
}

:where(.ammn-landing) .static-page__hero {
  text-align: center;
  margin-bottom: 48px;
}

:where(.ammn-landing) .static-page__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}

:where(.ammn-landing) .static-page__subtitle {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

:where(.ammn-landing) .static-page__card {
  background: var(--bg-primary)fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

:where(.ammn-landing) .static-page__section {
  margin-bottom: 32px;
}

:where(.ammn-landing) .static-page__section:last-child {
  margin-bottom: 0;
}

:where(.ammn-landing) .static-page__section h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

:where(.ammn-landing) .static-page__section p {
  font-size: 15px;
  color: var(--n600);
  line-height: 1.7;
  margin: 0 0 12px;
}

:where(.ammn-landing) .static-page__section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.ammn-landing) .static-page__section li {
  font-size: 15px;
  color: var(--n600);
  line-height: 1.7;
  padding: 8px 0;
  border-bottom: 1px solid var(--n60);
}

:where(.ammn-landing) .static-page__section li:last-child {
  border-bottom: none;
}

:where(.ammn-landing) .static-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

:where(.ammn-landing) .static-page__grid-card {
  background: var(--n50);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

:where(.ammn-landing) .static-page__grid-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 8px;
}

:where(.ammn-landing) .static-page__grid-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

:where(.ammn-landing) .static-page__grid-card .icon {
  font-size: 32px;
}

:where(.ammn-landing) .static-page__empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--footer-muted);
  font-size: 18px;
}

@media (max-width: 768px) {
  :where(.ammn-landing) .static-page {
    padding: 100px 16px 40px;
  }

  :where(.ammn-landing) .static-page__title {
    font-size: 28px;
  }

  :where(.ammn-landing) .static-page__card {
    padding: 24px;
  }
}

/* ========== Static Pages — Premium ========== */

/* ── Shared Hero ── */
:where(.ammn-landing) .sp-hero {
  position: relative;
  padding: 160px 24px 100px;
  text-align: center;
  overflow: hidden;
  background-color: var(--landing-accent-dark);
  background-image:
    radial-gradient(60% 50% at 50% 0%,
      color-mix(in srgb, var(--brand-primary) 18%, transparent) 0%,
      transparent 60%),
    radial-gradient(40% 40% at 80% 30%,
      color-mix(in srgb, var(--brand-primary) 8%, transparent) 0%,
      transparent 70%),
    url("../assets/landing/hero/hero-bg-pattern.webp");
  background-size: 100% 600px, 100% 800px, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top center, top right, center;
}

:where(.ammn-landing) .sp-hero::before { content: none; }

:where(.ammn-landing) .sp-hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

:where(.ammn-landing) .sp-hero__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sys-color-one) 18%, transparent), transparent 70%);
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

:where(.ammn-landing) .sp-hero__title {
  position: relative;
  z-index: 1;
  font-size: 44px;
  font-weight: 700;
  color: var(--brand-white);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

:where(.ammn-landing) .sp-hero__subtitle {
  position: relative;
  z-index: 1;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Content Area ── */
:where(.ammn-landing) .sp-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: -48px auto 0;
  padding: 0 24px 80px;
}

:where(.ammn-landing) .sp-card {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 48px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  animation: spCardIn 0.5s ease both;
}

:where(.ammn-landing) .sp-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
  font-size: 18px;
}

@keyframes spCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── About — Duo Cards ── */
:where(.ammn-landing) .about-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

:where(.ammn-landing) .about-duo__card {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--sys-color-one);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: spCardIn 0.5s ease both;
}

:where(.ammn-landing) .about-duo__card:nth-child(2) {
  animation-delay: 0.1s;
}

:where(.ammn-landing) .about-duo__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

:where(.ammn-landing) .about-duo__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-color-one) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--sys-color-one);
}

:where(.ammn-landing) .about-duo__icon svg {
  width: 24px;
  height: 24px;
}

:where(.ammn-landing) .about-duo__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

:where(.ammn-landing) .about-duo__text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ── About — Values ── */
:where(.ammn-landing) .about-values {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  animation: spCardIn 0.5s ease 0.15s both;
}

:where(.ammn-landing) .about-values__heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 24px;
}

:where(.ammn-landing) .about-values__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

:where(.ammn-landing) .about-values__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  transition: background 0.2s ease;
}

:where(.ammn-landing) .about-values__item:hover {
  background: color-mix(in srgb, var(--sys-color-one) 8%, var(--surface));
}

:where(.ammn-landing) .about-values__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sys-color-one) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sys-color-one);
}

:where(.ammn-landing) .about-values__check svg {
  width: 14px;
  height: 14px;
}

/* ── About — Badge ── */
:where(.ammn-landing) .about-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  background: color-mix(in srgb, var(--sys-color-one) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--sys-color-one) 20%, transparent);
  border-radius: var(--radius-sm);
  color: var(--sys-color-one);
  font-size: 15px;
  font-weight: 600;
  animation: spCardIn 0.5s ease 0.2s both;
}

:where(.ammn-landing) .about-badge svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* ── Premium FAQ Enhancements ── */
:where(.ammn-landing) .sp-card .faq-page__item {
  border-left: 3px solid transparent;
  padding-left: 16px;
  transition: border-color 0.3s ease;
}

:where(.ammn-landing) .sp-card .faq-page__item[open] {
  border-left-color: var(--sys-color-one);
}

/* ── Premium Blog Enhancements ── */
:where(.ammn-landing) .sp-card .blog-grid {
  gap: 28px;
}

:where(.ammn-landing) .sp-card .blog-card {
  box-shadow: var(--shadow-sm);
}

:where(.ammn-landing) .sp-card .blog-card:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Premium Claims Enhancements ── */
:where(.ammn-landing) .sp-card .claims-wizard__progress {
  margin-bottom: 40px;
}

:where(.ammn-landing) .sp-card .claims-wizard__option {
  border-radius: var(--radius-md);
}

:where(.ammn-landing) .sp-card .claims-wizard__btn--next {
  border-radius: var(--radius-sm);
  padding: 12px 28px;
}

:where(.ammn-landing) .sp-card .claims-wizard__btn--back {
  border-radius: var(--radius-sm);
  padding: 12px 28px;
}

:where(.ammn-landing) .sp-card .claims-wizard__detail {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sys-color-one) 4%, var(--bg));
  border-color: color-mix(in srgb, var(--sys-color-one) 15%, transparent);
}

/* ── Dark Mode — Premium Static Pages ── */
[data-theme="dark"] :where(.ammn-landing) .sp-hero {
  background: linear-gradient(165deg, color-mix(in srgb, var(--landing-accent-dark) 90%, black) 0%, color-mix(in srgb, var(--landing-accent-dark) 60%, var(--sys-color-one)) 100%);
}

[data-theme="dark"] :where(.ammn-landing) .sp-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] :where(.ammn-landing) .about-duo__card {
  background: var(--surface);
  border-color: var(--border);
  border-top-color: var(--sys-color-one);
}

[data-theme="dark"] :where(.ammn-landing) .about-values {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] :where(.ammn-landing) .about-values__item {
  background: var(--bg);
}

[data-theme="dark"] :where(.ammn-landing) .about-badge {
  background: color-mix(in srgb, var(--sys-color-one) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--sys-color-one) 20%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .sp-card .claims-wizard__detail {
  background: color-mix(in srgb, var(--sys-color-one) 6%, var(--bg));
  border-color: color-mix(in srgb, var(--sys-color-one) 15%, transparent);
}

/* ── Responsive — Premium Static Pages ── */
@media (max-width: 768px) {
  :where(.ammn-landing) .sp-hero {
    padding: 120px 16px 80px;
  }

  :where(.ammn-landing) .sp-hero__title {
    font-size: 32px;
  }

  :where(.ammn-landing) .sp-hero__subtitle {
    font-size: 15px;
  }

  :where(.ammn-landing) .sp-content {
    padding: 0 16px 60px;
    margin-top: -32px;
  }

  :where(.ammn-landing) .sp-card {
    padding: 24px;
  }

  :where(.ammn-landing) .about-duo {
    grid-template-columns: 1fr;
  }

  :where(.ammn-landing) .about-duo__card {
    padding: 24px;
  }

  :where(.ammn-landing) .about-values {
    padding: 24px;
  }

  :where(.ammn-landing) .about-values__grid {
    grid-template-columns: 1fr;
  }

  :where(.ammn-landing) .sp-card .faq-page__item {
    padding-left: 12px;
  }
}

/* ── RTL — Premium Static Pages ── */
[dir="rtl"] :where(.ammn-landing) .sp-card .faq-page__item {
  border-left: none;
  padding-left: 0;
  border-right: 3px solid transparent;
  padding-right: 16px;
}

[dir="rtl"] :where(.ammn-landing) .sp-card .faq-page__item[open] {
  border-left-color: transparent;
  border-right-color: var(--sys-color-one);
}

@media (max-width: 768px) {
  [dir="rtl"] :where(.ammn-landing) .sp-card .faq-page__item {
    padding-right: 12px;
  }
}

/* ============================================================
   RTL OVERRIDES — [dir="rtl"]
   ============================================================ */

/* --- Topbar / Navbar --- */
[dir="rtl"] :where(.ammn-landing) .topbar {
  left: auto;
  right: 0;
}

/* --- Partners Section --- */
[dir="rtl"] :where(.ammn-landing) .inside h1,
[dir="rtl"] :where(.ammn-landing) .inside h2,
[dir="rtl"] :where(.ammn-landing) .inside p {
  margin-left: 0;
  margin-right: 90px;
}

[dir="rtl"] :where(.ammn-landing) .section_2imgs {
  -webkit-mask-image: linear-gradient(to left,
      transparent 0%,
      var(--text) 10%,
      var(--text) 90%,
      transparent 100%);
  mask-image: linear-gradient(to left,
      transparent 0%,
      var(--text) 10%,
      var(--text) 90%,
      transparent 100%);
}

[dir="rtl"] :where(.ammn-landing) .section_2imgs,
[dir="rtl"] :where(.ammn-landing) .section_2imgs_service {
  direction: ltr;
}

[dir="rtl"] :where(.ammn-landing) .scroll-track {
  transform-origin: left center;
}

/* --- Payment Section --- */

/* --- Insurance Carousel --- */

[dir="rtl"] :where(.ammn-landing) .slide-title {
  left: auto;
  right: 48px;
}

[dir="rtl"] :where(.ammn-landing) .btn-right span {
  margin-left: 0;
  margin-right: 4px;
}

[dir="rtl"] :where(.ammn-landing) .btn-right span img,
[dir="rtl"] :where(.ammn-landing) .btn-right span svg {
  transform: scaleX(-1);
}

[dir="rtl"] :where(.ammn-landing) .nav-card-btn img,
[dir="rtl"] :where(.ammn-landing) .nav-card-btn svg,
[dir="rtl"] :where(.ammn-landing) .lis-nav-btn svg {
  transform: scaleX(-1);
}

/* --- Support Cards --- */

[dir="rtl"] :where(.ammn-landing) .p {
  padding-left: 0;
  padding-right: 80px;
}

[dir="rtl"] :where(.ammn-landing) .lis-nav-btn svg {
  transform: scaleX(-1);
}

/* --- After Insurance (Glass Promo) --- */

/* --- Licensed Section --- */
[dir="rtl"] :where(.ammn-landing) .licensed-insurance-slide {
  left: auto;
  right: 0;
}

/* --- FAQ Section --- */

[dir="rtl"] :where(.ammn-landing) .faq-chip.active {
  justify-content: right;
}

/* --- CTA Section --- */

[dir="rtl"] :where(.ammn-landing) .base {
  right: auto;
  left: 0;
}

/* --- Footer --- */

/* --- Responsive RTL overrides --- */
@media (max-width: 768px) {

  [dir="rtl"] :where(.ammn-landing) .inside h1,
[dir="rtl"] :where(.ammn-landing) .inside h2,
[dir="rtl"] :where(.ammn-landing) .inside p {
    margin-right: 20px;
  }

  [dir="rtl"] :where(.ammn-landing) .cards-h1,
[dir="rtl"] :where(.ammn-landing) .p {
    padding-right: 20px;
  }

  }

@media (max-width: 480px) {

  [dir="rtl"] :where(.ammn-landing) .inside h1,
[dir="rtl"] :where(.ammn-landing) .inside h2,
[dir="rtl"] :where(.ammn-landing) .inside p {
    margin-right: 16px;
  }

  [dir="rtl"] :where(.ammn-landing) .cards-h1,
[dir="rtl"] :where(.ammn-landing) .p {
    padding-right: 16px;
  }

  }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — Landing page sections
   ══════════════════════════════════════════════════════════════════ */

/* --- Navbar (always dark bg — fix inverted n0 text) --- */
[data-theme="dark"] :where(.ammn-landing) .navbar {
  background-color: color-mix(in srgb, var(--n900) 30%, transparent);
}

/* --- Hero Section (always dark bg — fix inverted n0 text) --- */

/* --- Hero Buttons (always on dark bg) --- */
[data-theme="dark"] :where(.ammn-landing) .btn-primary {
  color: var(--n900);
  background: color-mix(in srgb, var(--n900) 18%, transparent);
  border-color: color-mix(in srgb, var(--n900) 30%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .btn-primary:hover {
  background: color-mix(in srgb, var(--n900) 28%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .btn-secondary {
  color: var(--n900);
  background: color-mix(in srgb, var(--n900) 12%, transparent);
}

/* --- Insurance Carousel (dark bg — fix inverted text) --- */

[data-theme="dark"] :where(.ammn-landing) .carousel-slide .slide-overlay {
  background: linear-gradient(to top,
      color-mix(in srgb, var(--bg) 95%, transparent) 0%,
      color-mix(in srgb, var(--bg) 50%, transparent) 30%,
      transparent 60%);
}

html[data-theme="dark"] :where(.ammn-landing) .slide-title,
html[data-theme="dark"] :where(.ammn-landing) .carousel-slide .slide-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] :where(.ammn-landing) .slide-title {
  color: var(--n900);
}

[data-theme="dark"] :where(.ammn-landing) .btn-right {
  color: var(--n900);
  background: color-mix(in srgb, var(--n900) 12%, transparent);
  border-image-source: linear-gradient(135deg,
      color-mix(in srgb, var(--n900) 60%, transparent) 0%,
      color-mix(in srgb, var(--n900) 0%, transparent) 50.07%,
      color-mix(in srgb, var(--n900) 40%, transparent) 100%);
}

/* --- Motor Steps Cards (gradient bg — fix inverted text) --- */

/* Motor card ext dark mode overrides */

/* Motor pills: text and icons must be white in dark mode */

/* Riyal icon: invert to white in dark mode */
html[data-theme="dark"] :where(.ammn-landing) .motor-pill.white .riyal-icon,
html[data-theme="dark"] :where(.ammn-landing) .riyal-icon {
  filter: brightness(0) invert(1);
}

/* Arrow circle in dark mode */

/* --- Partners Section (white bg → dark) --- */
[data-theme="dark"] :where(.ammn-landing) .section_2 {
  background-color: var(--bg-primary);
}

[data-theme="dark"] :where(.ammn-landing) .inside h1,
[data-theme="dark"] :where(.ammn-landing) .inside h2 {
  color: var(--text-primary);
}

[data-theme="dark"] :where(.ammn-landing) .inside p {
  color: var(--text-secondary);
}

/* --- Support Cards Section (white bg → dark) --- */
[data-theme="dark"] :where(.ammn-landing) .cards {
  background: var(--bg-primary);
}

[data-theme="dark"] :where(.ammn-landing) .p {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .lis-nav-btn {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] :where(.ammn-landing) .lis-nav-btn svg {
  color: var(--text-primary);
}

/* --- Licensed Section (white bg → dark) --- */

/* Licensed section dark mode additional overrides */

/* All mini logos in dark mode: white background for visibility */
[data-theme="dark"] :where(.ammn-landing) .mini-logo {
  background: var(--n0);
  border-color: color-mix(in srgb, var(--n0) 20%, transparent);
}

/* Apple logo: use dark-mode specific asset */
[data-theme="dark"] :where(.ammn-landing) .mini-logo.l5 {
  content: url("../assets/landing/payment/apple-logo.svg");
}

/* Footer contact icons: invert to white in dark mode */

/* --- Payment Cards Section (dark mode) --- */

[data-theme="dark"] :where(.ammn-landing) .pay-text h2 {
  color: var(--text-primary);
}

[data-theme="dark"] :where(.ammn-landing) .pay-text p {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .pay-card.c1 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 30%, var(--n900)) 0%, var(--n900) 50%);
}

[data-theme="dark"] :where(.ammn-landing) .pay-card.c2 {
  background: var(--bg-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .pay-card.c5 {
  background: var(--n900);
}

[data-theme="dark"] :where(.ammn-landing) .pay-card.c6 {
  background: linear-gradient(135deg, #1a2a3a 0, var(--bg-secondary) 100%);
}

/* Dark mode: don't apply brightness filter to replaced card SVGs */
[data-theme="dark"] :where(.ammn-landing) .pay-card img,
[data-theme="dark"] :where(.ammn-landing) .pay-card .mc-text {
  filter: none;
}

[data-theme="dark"] :where(.ammn-landing) .pay-card.c1,
[data-theme="dark"] :where(.ammn-landing) .pay-card.c2,
[data-theme="dark"] :where(.ammn-landing) .pay-card.c3,
[data-theme="dark"] :where(.ammn-landing) .pay-card.c4,
[data-theme="dark"] :where(.ammn-landing) .pay-card.c5,
[data-theme="dark"] :where(.ammn-landing) .pay-card.c6,
[data-theme="dark"] :where(.ammn-landing) .pay-card.c7 {
  background: transparent;
}

/* --- Motor Steps Section (dark mode) --- */

/* --- Footer (white bg → dark) --- */
[data-theme="dark"] :where(.ammn-landing) .footer {
  background: var(--landing-accent-dark);
  box-shadow: var(--shadow-md);
}

/* --- Static Pages (Privacy/Terms) --- */
[data-theme="dark"] :where(.ammn-landing) .static-page {
  background: var(--bg-primary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__title {
  color: var(--text-primary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__subtitle {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__card {
  background: var(--bg-secondary);
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__section h3 {
  color: var(--text-primary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__section p {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__section li {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__grid-card {
  background: var(--bg-primary);
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__grid-card h4 {
  color: var(--text-primary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__grid-card p {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(.ammn-landing) .static-page__contact-list {
  color: var(--text-secondary);
}

/* --- FAQ Section (white bg → dark) --- */

[data-theme="dark"] :where(.ammn-landing) .faq-chip {
  background: var(--bg-secondary);
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .faq-chip.active {
  color: var(--n900);
}

/* --- Glass Cards (sectionthree → dark) --- */

/* Glass card logos: white background container in dark mode */

/* Non-logo imgs inside octa-child: keep transparent */

/* Partner logos: keep original colors — no inversion */
:where(.ammn-landing) .hover-card img {
  filter: none !important;
}

/* Partner cards: neutral grey instead of brand-blue gradient */
:where(.ammn-landing) .hover-card {
  background: linear-gradient(135deg, #e8e8e8 0%, #f2f2f2 50%, #fafafa 100%) !important;
}

/* --- Why AMMN Section (stacked cards — fix inverted text) --- */
[data-theme="dark"] :where(.ammn-landing) .secondpart h1,
[data-theme="dark"] :where(.ammn-landing) .secondpart h3 {
  color: var(--n900);
}

[data-theme="dark"] :where(.ammn-landing) .secondpart p {
  color: color-mix(in srgb, var(--n900) 92%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
   FAQ Page — Accordion
   ══════════════════════════════════════════════════════════════════ */

:where(.ammn-landing) .faq-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--n70);
}

:where(.ammn-landing) .faq-type-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--n100);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:where(.ammn-landing) .faq-type-tab:hover {
  background: var(--n10);
}

:where(.ammn-landing) .faq-type-tab--active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--n0);
}

:where(.ammn-landing) .faq-type-tab--active:hover {
  background: var(--brand-blue);
}

:where(.ammn-landing) .faq-page__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:where(.ammn-landing) .faq-page__item {
  border-bottom: 1px solid var(--n70);
}

:where(.ammn-landing) .faq-page__item:last-child {
  border-bottom: none;
}

:where(.ammn-landing) .faq-page__question {
  cursor: pointer;
  padding: 20px 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.2s ease;
}

:where(.ammn-landing) .faq-page__question::-webkit-details-marker {
  display: none;
}

:where(.ammn-landing) .faq-page__question::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--sys-color-one);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

:where(.ammn-landing) .faq-page__item[open] .faq-page__question::after {
  content: "\2212";
  transform: rotate(180deg);
}

:where(.ammn-landing) .faq-page__question:hover {
  color: var(--sys-color-one);
}

:where(.ammn-landing) .faq-page__answer {
  padding: 0 0 20px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  text-align: justify;
  animation: faqFadeIn 0.3s ease;
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[dir="rtl"] :where(.ammn-landing) .faq-page__question {
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════
   Blog Page — Grid + Cards
   ══════════════════════════════════════════════════════════════════ */

:where(.ammn-landing) .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

:where(.ammn-landing) .blog-card {
  background: var(--bg-secondary);
  border: 1px solid var(--n70);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

:where(.ammn-landing) .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

:where(.ammn-landing) .blog-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

:where(.ammn-landing) .blog-card__image-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--landing-accent-dark) 0%, var(--sys-color-one) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.ammn-landing) .blog-card__image-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
  color: var(--n0);
}

:where(.ammn-landing) .blog-card__body {
  padding: 20px;
}

:where(.ammn-landing) .blog-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.4;
}

:where(.ammn-landing) .blog-card__date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

:where(.ammn-landing) .blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sys-color-one);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: gap 0.2s ease;
}

:where(.ammn-landing) .blog-card__link:hover {
  gap: 10px;
}

/* Blog Detail */

:where(.ammn-landing) .blog-detail__hero-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 24px;
}

:where(.ammn-landing) .blog-detail__meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

:where(.ammn-landing) .blog-detail__body {
  color: var(--text-primary);
  line-height: 1.8;
  font-size: 1rem;
  text-align: justify;
}

:where(.ammn-landing) .blog-detail__body p {
  margin-bottom: 16px;
}

:where(.ammn-landing) .blog-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sys-color-one);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 24px;
  transition: gap 0.2s ease;
}

:where(.ammn-landing) .blog-detail__back:hover {
  gap: 10px;
}

[dir="rtl"] :where(.ammn-landing) .blog-card__body {
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════
   Claims Page — 3-Step CSS Wizard
   ══════════════════════════════════════════════════════════════════ */

:where(.ammn-landing) .claims-wizard {
  max-width: 900px;
  margin: 0 auto;
}

/* Progress bar */
:where(.ammn-landing) .claims-wizard__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

:where(.ammn-landing) .claims-wizard__progress-step {
  display: flex;
  align-items: center;
  gap: 0;
}

:where(.ammn-landing) .claims-wizard__progress-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--n70);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  transition: all 0.3s ease;
}

:where(.ammn-landing) .claims-wizard__progress-dot--active {
  border-color: var(--sys-color-one);
  color: var(--n0);
  background: var(--sys-color-one);
}

:where(.ammn-landing) .claims-wizard__progress-dot--done {
  border-color: var(--success);
  color: var(--n0);
  background: var(--success);
}

:where(.ammn-landing) .claims-wizard__progress-line {
  width: 60px;
  height: 2px;
  background: var(--n70);
  transition: background 0.3s ease;
}

:where(.ammn-landing) .claims-wizard__progress-line--done {
  background: var(--success);
}

:where(.ammn-landing) .claims-wizard__step {
  display: none;
  animation: faqFadeIn 0.3s ease;
}

:where(.ammn-landing) .claims-wizard__step--active {
  display: block;
}

/* Option grid (regions, companies) */
:where(.ammn-landing) .claims-wizard__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

:where(.ammn-landing) .claims-wizard__options--regions {
  grid-template-columns: repeat(2, 1fr);
}

:where(.ammn-landing) .claims-wizard__option {
  background: var(--bg-secondary);
  border: 2px solid var(--n70);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-primary);
  font-weight: 500;
}

:where(.ammn-landing) .claims-wizard__option:hover {
  border-color: var(--sys-color-one);
  transform: translateY(-2px);
}

:where(.ammn-landing) .claims-wizard__option--selected {
  border-color: var(--sys-color-one);
  background: color-mix(in srgb, var(--sys-color-one) 8%, transparent);
}

:where(.ammn-landing) .claims-wizard__option-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
}

:where(.ammn-landing) .claims-wizard__option-name {
  font-size: 0.95rem;
}

/* Step title */
:where(.ammn-landing) .claims-wizard__step-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-align: center;
}

/* Navigation buttons */
:where(.ammn-landing) .claims-wizard__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 16px;
}

:where(.ammn-landing) .claims-wizard__btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

:where(.ammn-landing) .claims-wizard__btn--back {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--n70);
}

:where(.ammn-landing) .claims-wizard__btn--back:hover {
  background: var(--n70);
}

:where(.ammn-landing) .claims-wizard__btn--next {
  background: var(--sys-color-one);
  color: var(--n0);
}

:where(.ammn-landing) .claims-wizard__btn--next:hover {
  opacity: 0.9;
}

:where(.ammn-landing) .claims-wizard__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Detail card (step 3) */
:where(.ammn-landing) .claims-wizard__detail {
  background: var(--bg-secondary);
  border: 1px solid var(--n70);
  border-radius: 16px;
  padding: 24px;
}

:where(.ammn-landing) .claims-wizard__detail-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

:where(.ammn-landing) .claims-wizard__detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:where(.ammn-landing) .claims-wizard__detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

:where(.ammn-landing) .claims-wizard__detail-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--sys-color-one);
}

:where(.ammn-landing) .claims-wizard__detail-link {
  color: var(--sys-color-one);
  text-decoration: none;
}

:where(.ammn-landing) .claims-wizard__detail-link:hover {
  text-decoration: underline;
}

/* Claims directory — instruction note (from JSON "note" items) */
:where(.ammn-landing) .claims-wizard__detail-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

:where(.ammn-landing) .claims-wizard__detail-note + .claims-wizard__detail-item {
  margin-top: -4px;
}

/* Claims directory — a branch card (from JSON "branch" items) */
:where(.ammn-landing) .claims-wizard__detail-branch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--n70);
  border-radius: 12px;
  background: var(--bg);
}

:where(.ammn-landing) .claims-wizard__detail-branch-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__detail-branch {
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

/* Static page contact list */
:where(.ammn-landing) .static-page__contact-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-secondary);
}

/* Bulleted lists inside Privacy / Terms section bodies (RTL-aware) */
:where(.ammn-landing) .static-page__list {
  margin: 8px 0 12px;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  line-height: 1.8;
}

:where(.ammn-landing) .static-page__list li {
  list-style: disc;
}

/* Dark mode overrides for content pages */
[data-theme="dark"] :where(.ammn-landing) .faq-page__item {
  border-bottom-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .blog-card {
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__progress-dot {
  border-color: color-mix(in srgb, var(--n0) 15%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__progress-line {
  background: color-mix(in srgb, var(--n0) 15%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__option {
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__detail {
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__btn--back {
  border-color: color-mix(in srgb, var(--n0) 15%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .claims-wizard__btn--back:hover {
  background: color-mix(in srgb, var(--n0) 10%, transparent);
}

@media (max-width: 768px) {
  :where(.ammn-landing) .blog-grid {
    grid-template-columns: 1fr;
  }

  :where(.ammn-landing) .claims-wizard__options {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.ammn-landing) .claims-wizard__options--regions {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.ammn-landing) .claims-wizard__progress-line {
    width: 30px;
  }
}

/* --- Payment Logos RTL Layout --- */

/* RTL payment cards: nudge to align with text/logos */

[dir="rtl"] :where(.ammn-landing) .mini-logo.l1 {
  right: calc(50% - 182px + 6 * (40px + 12px));
}

[dir="rtl"] :where(.ammn-landing) .mini-logo.l2 {
  right: calc(50% - 182px + 5 * (40px + 12px));
}

[dir="rtl"] :where(.ammn-landing) .mini-logo.l3 {
  right: calc(50% - 182px + 4 * (40px + 12px));
}

[dir="rtl"] :where(.ammn-landing) .mini-logo.l4 {
  right: calc(50% - 182px + 3 * (40px + 12px));
}

[dir="rtl"] :where(.ammn-landing) .mini-logo.l5 {
  right: calc(50% - 182px + 2 * (40px + 12px));
}

[dir="rtl"] :where(.ammn-landing) .mini-logo.l6 {
  right: calc(50% - 182px + 1 * (40px + 12px));
}

[dir="rtl"] :where(.ammn-landing) .mini-logo.l7 {
  right: calc(50% - 182px + 0 * (40px + 12px));
}

/* ============================================================
   Migrated from design-landing.css (unique selectors only)
   Date: 2026-02-27
   ============================================================ */

/* --- RTL Overrides --- */

[dir='rtl'] :where(.ammn-landing) .slider-arrow img,
html[lang='ar'] :where(.ammn-landing) .slider-arrow img,
[dir='rtl'] :where(.ammn-landing) .nav-card-btn img,
html[lang='ar'] :where(.ammn-landing) .nav-card-btn img,
[dir='rtl'] :where(.ammn-landing) .lis-nav-btn svg,
html[lang='ar'] :where(.ammn-landing) .lis-nav-btn svg,
[dir='rtl'] :where(.ammn-landing) .lis-nav-btn img,
html[lang='ar'] :where(.ammn-landing) .lis-nav-btn img {
  transform: scaleX(-1);
}

[dir='rtl'] :where(.ammn-landing) .pay-text,
html[lang='ar'] :where(.ammn-landing) .pay-text {
  direction: rtl;
  text-align: start;
}

/* The RTL artwork is now selected in CtaSection.razor (see FooterSection for the
   same pattern). `content:` repainted the image but never cancelled the fetch the
   preload scanner had already started, so every Arabic visitor — the default —
   downloaded the 503KB LTR file and then threw it away. */

[dir='rtl'] :where(.ammn-landing) .footer,
[dir='rtl'] :where(.ammn-landing) .footer-top,
[dir='rtl'] :where(.ammn-landing) .footer-brand,
[dir='rtl'] :where(.ammn-landing) .footer-column,
[dir='rtl'] :where(.ammn-landing) .footer-links li,
[dir='rtl'] :where(.ammn-landing) .footer-links a,
[dir='rtl'] :where(.ammn-landing) .footer-bottom,
[dir='rtl'] :where(.ammn-landing) .copyright,
html[lang='ar'] :where(.ammn-landing) .footer,
html[lang='ar'] :where(.ammn-landing) .footer-top,
html[lang='ar'] :where(.ammn-landing) .footer-brand,
html[lang='ar'] :where(.ammn-landing) .footer-column,
html[lang='ar'] :where(.ammn-landing) .footer-links li,
html[lang='ar'] :where(.ammn-landing) .footer-links a,
html[lang='ar'] :where(.ammn-landing) .footer-bottom,
html[lang='ar'] :where(.ammn-landing) .copyright {
  text-align: start;
}

[dir='rtl'] :where(.ammn-landing) .cards-h1,
[dir='rtl'] :where(.ammn-landing) .cards>.p,
html[lang='ar'] :where(.ammn-landing) .cards-h1,
html[lang='ar'] :where(.ammn-landing) .cards>.p {
  text-align: start;
}

[dir='rtl'] :where(.ammn-landing) .cta,
html[lang='ar'] :where(.ammn-landing) .cta {
  flex-direction: row-reverse;
}

[dir='rtl'] :where(.ammn-landing) .scroll-track,
html[lang='ar'] :where(.ammn-landing) .scroll-track,
html[lang='ur'] :where(.ammn-landing) .scroll-track {
  animation-name: marquee-rtl;
}

[dir='rtl'] :where(.ammn-landing) .pay-text p,
html[lang='ar'] :where(.ammn-landing) .pay-text p,
html[lang='ur'] :where(.ammn-landing) .pay-text p {
  text-align: start;
}

[dir='rtl'] :where(.ammn-landing) .pay-text,
html[lang='ar'] :where(.ammn-landing) .pay-text,
html[lang='ur'] :where(.ammn-landing) .pay-text {
  overflow: hidden;
  max-width: 100%;
  text-align: start;
  align-items: flex-start;
}

[dir='rtl'] :where(.ammn-landing) #infoTitle,
[dir='rtl'] :where(.ammn-landing) #infoDescription {
  text-align: start;
}

[dir='rtl'] :where(.ammn-landing) .btn-right img,
[dir='rtl'] :where(.ammn-landing) .btn-right svg {
  transform: scaleX(-1);
}

[dir='rtl'] :where(.ammn-landing) .cards-h1,
[dir='rtl'] :where(.ammn-landing) .cards>.p {
  padding-left: 0;
  padding-right: 80px;
}

[dir='rtl'] :where(.ammn-landing) .licensed-certificate-number {
  margin-left: 0;
  margin-right: 15px;
}

/* --- Marquee Animations --- */

@keyframes marquee-rtl {
  0% {
    transform: translateX(calc(-1 * var(--total-width, 1500px) / 2));
  }

  100% {
    transform: translateX(0);
  }
}

[data-theme="dark"] body:where(:has(.ammn-landing)) {
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] :where(.ammn-landing) .navbar {
  background: var(--dark-bg);
}

/* --- Other Unique Selectors --- */

:where(.ammn-landing) .section_2imgs:hover .scroll-track {
  animation-play-state: paused;
}

/* --- Responsive Breakpoints (unique inner rules) --- */

/* scroll-lock overrides removed — auto-play replaces scroll-based animation */

/* ══════════════════════════════════════════════════════════════════════
   EXT RESPONSIVE SYSTEM — Merged from landing-ext.css
   ══════════════════════════════════════════════════════════════════════ */

/* ── FIX #9: Global overflow safety ── */
.ammn-landing {
  overflow-x: hidden;
}

html:where(:has(.ammn-landing)) {
  overflow-x: hidden;
}

/* ──────────────────────────────────────────────────────────────────────
   BREAKPOINT: 1024px — Small laptops / large tablets
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  :where(.ammn-landing) .inside h1,
:where(.ammn-landing) .inside h2,
:where(.ammn-landing) .inside p {
    margin-left: 40px !important;
  }

  [dir="rtl"] :where(.ammn-landing) .inside h1,
[dir="rtl"] :where(.ammn-landing) .inside h2,
[dir="rtl"] :where(.ammn-landing) .inside p {
    margin-right: 40px !important;
    margin-left: 0 !important;
  }

  :where(.ammn-landing) .footer {
    padding: 60px 40px 30px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   BREAKPOINT: 768px — Tablets / large phones (landscape)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  :where(.ammn-landing) .inside h1,
:where(.ammn-landing) .inside h2,
:where(.ammn-landing) .inside p {
    margin-left: 20px !important;
  }

  [dir="rtl"] :where(.ammn-landing) .inside h1,
[dir="rtl"] :where(.ammn-landing) .inside h2,
[dir="rtl"] :where(.ammn-landing) .inside p {
    margin-right: 20px !important;
    margin-left: 0 !important;
  }

  :where(.ammn-landing) .section_2imgs {
    padding: 30px 0 !important;
  }

  :where(.ammn-landing) .pay-text h2 {
    font-size: 28px !important;
  }

  :where(.ammn-landing) .cta {
    height: auto !important;
    overflow: hidden !important;
  }

  :where(.ammn-landing) .footer {
    padding: 30px 20px 20px !important;
    margin: -40px 12px 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }

  :where(.ammn-landing) .navbar {
    padding: 8px 16px !important;
  }

  /* Fix navbar gap — override top:5px */
  :where(.ammn-landing) .topbar {
    top: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Hide only login button on mobile — keep lang + theme toggle */
  
  :where(.ammn-landing) .navbar {
    justify-content: space-between !important;
    padding: 8px 16px !important;
    height: 50px !important;
  }

  /* Mobile dropdown — keep dark bg + light text in both themes,
     and sit flush against the navbar bottom (was top:64px on a 50px navbar). */
  
  /* ── Two-column mobile menu ───────────────────────────────────────────
     Replaces the old Services dropdown. The main nav (Home/FAQ/Blog/Claims/
     About) fills one half and the services list the other, split by a
     vertical separator — one dark sheet under the navbar. JS
     (initMobileMenu) toggles .services-bar--in-menu on #servicesBar in
     lock-step with the menu. LTR: nav left / services right; RTL flips. ── */

  /* Services bar stays hidden until the menu opens it as a column. */
  :where(.ammn-landing) .services-bar {
    display: none !important;
  }

  /* Main-nav column. */
  
  /* Remove the old "Services" dropdown item — services have their own column. */
    
  /* Services column + the middle separator. */
  :where(.ammn-landing) .services-bar.services-bar--in-menu {
    display: block !important;
    position: fixed !important;
    top: 50px !important;
    left: auto !important;
    right: 0 !important;
    width: 50vw !important;
    max-height: calc(100dvh - 50px) !important;
    z-index: 100 !important;
    background-color: rgba(10, 22, 40, 0.92) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
    overflow-y: auto !important;
    animation: none !important;
  }

  [dir="rtl"] :where(.ammn-landing) .services-bar.services-bar--in-menu {
    right: auto !important;
    left: 0 !important;
    border-left: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  /* Mobile info-box: dark glassmorphic background */

  :where(.ammn-landing) .mobile-dot {
    background: rgba(66, 82, 110, 0.8) !important;
  }

  :where(.ammn-landing) .mobile-dot.active {
    background: #FFFFFF !important;
  }

  :where(.ammn-landing) .mobile-buy-button {
    background: #FFFFFF !important;
    color: #172B4D !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    box-shadow: 1px 6px 16px 0px rgba(0, 0, 0, 0.08) !important;
  }

  :where(.ammn-landing) .mobile-explore-link {
    color: #FAFBFC !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 14px 24px !important;
    border-radius: 99px !important;
    border: 0.7px solid rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hero: structural layout fix */
  :where(.ammn-landing) .hero {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    padding-top: 54px !important;
    padding-bottom: 0 !important;
    flex-wrap: wrap !important;
  }

  :where(.ammn-landing) .hero-slide {
    height: auto !important;
    min-height: auto !important;
    padding: 24px 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  :where(.ammn-landing) .hero-slide:first-child {
    height: auto !important;
  }

  :where(.ammn-landing) .hero::before {
    opacity: 0.35 !important;
  }

  :where(.ammn-landing) .hero-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
  }

  :where(.ammn-landing) .hero-buttons .btn-primary,
:where(.ammn-landing) .hero-buttons .btn-secondary {
    flex: 1 1 0 !important;
    max-width: none !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  :where(.ammn-landing) .section_2 {
    margin-top: -80px !important;
    padding-top: 80px !important;
  }

  }

/* ──────────────────────────────────────────────────────────────────────
   BREAKPOINT: 639px — Mobile payment, glass cards, support cards, Why AMMN
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* Payment section */

  :where(.ammn-landing) .pay-text {
    order: 1 !important;
    min-height: auto !important;
    transform: none !important;
    text-align: center !important;
    align-items: center !important;
    padding: 0 20px !important;
    margin-bottom: 16px !important;
    flex-direction: column !important;
  }

  :where(.ammn-landing) .pay-text p {
    font-size: 26px !important;
    line-height: 34px !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: var(--n800, #172B4D) !important;
    margin-left: 0 !important;
    min-height: 44px !important;
    max-width: 100% !important;
  }

  :where(.ammn-landing) .mini-logo {
    display: inline-block !important;
    position: relative !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
  }

  /* Stack state: fanned cards */

  /* Expanded state: transform-based carousel */

  [dir="rtl"] :where(.ammn-landing) .pay-text {
    text-align: center !important;
  }

  [dir="rtl"] :where(.ammn-landing) .pay-text p {
    margin-right: 0 !important;
  }

  /* Support cards: mobile redesign */
  :where(.ammn-landing) .cards {
    padding: 40px 0 !important;
  }

  :where(.ammn-landing) .cards > .p {
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin-bottom: 24px !important;
  }

  :where(.ammn-landing) .features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  :where(.ammn-landing) .buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    top: 0 !important;
    margin-top: 8px !important;
  }

  :where(.ammn-landing) .lis-nav-btn {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 0.7px solid rgba(255, 255, 255, 0.2) !important;
  }

  :where(.ammn-landing) .lis-nav-btn svg {
    color: #FAFBFC !important;
  }

  [dir="rtl"] :where(.ammn-landing) .cards > .p {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  /* Glass cards: vertical stack on mobile */

  /* Why AMMN: mobile fixes */
  
  :where(.ammn-landing) .four {
    padding: 40px 0 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  :where(.ammn-landing) .four::before {
    border-radius: 0 !important;
    inset: 0 !important;
  }

  :where(.ammn-landing) .upper {
    padding: 0 24px !important;
  }

  :where(.ammn-landing) .secondpart {
    height: auto !important;
    min-height: 90px !important;
    padding: 12px 16px 12px 100px !important;
    border-radius: 12px !important;
    background-size: cover !important;
  }

  :where(.ammn-landing) .secondpart h1,
:where(.ammn-landing) .secondpart h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }

  :where(.ammn-landing) .secondpart p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  :where(.ammn-landing) .cards-stack {
    padding: 0 16px !important;
  }

    }

/* Pay nav arrows stay hidden unless the mobile panels carousel is active. */

/* ──────────────────────────────────────────────────────────────────────
   BREAKPOINT: 480px — Standard phones
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  :where(.ammn-landing) .inside h1, :where(.ammn-landing) .inside h2 {
    font-size: 26px !important;
    line-height: 34px !important;
  }

  :where(.ammn-landing) .inside p {
    font-size: 13px !important;
  }

  :where(.ammn-landing) .section_2 {
    margin-top: -60px !important;
    padding-top: 60px !important;
  }

  :where(.ammn-landing) .four {
    padding: 30px 12px !important;
  }

  :where(.ammn-landing) .upper {
    padding: 0 12px !important;
    margin-bottom: 30px !important;
  }

  :where(.ammn-landing) .pay-text h2 {
    font-size: 22px !important;
  }

  :where(.ammn-landing) .pay-text p {
    font-size: 14px !important;
  }

  :where(.ammn-landing) .licensed-insurance-slide {
    width: 200px !important;
    max-width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  :where(.ammn-landing) .licensed-insurance-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  :where(.ammn-landing) .licensed-insurance-title-row {
    justify-content: center !important;
  }

  :where(.ammn-landing) .footer {
    padding: 24px 16px 16px !important;
    margin: -30px 8px 0 !important;
  }

  :where(.ammn-landing) .logo-icon {
    width: 40px !important;
    height: 40px !important;
  }

  :where(.ammn-landing) .brand img {
    width: 100px !important;
    height: auto !important;
  }

  /* Header: compact */
  :where(.ammn-landing) .topbar {
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transition: transform 0.3s ease !important;
    border-radius: 0 !important;
  }

  :where(.ammn-landing) .navbar {
    padding: 6px 12px !important;
    height: 46px !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* CTA section */
  :where(.ammn-landing) .cta {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  /* Hero phone refinements */

  :where(.ammn-landing) .hero-slide {
    padding: 20px 16px 0 !important;
  }

  :where(.ammn-landing) .hero-buttons {
    padding: 0 12px !important;
  }

  :where(.ammn-landing) .hero-buttons .btn-primary,
:where(.ammn-landing) .hero-buttons .btn-secondary {
    padding: 11px 16px !important;
    font-size: 13px !important;
  }

  /* Hero secondary badges */
  
  :where(.ammn-landing) .hero::before {
    opacity: 0.15 !important;
  }

  /* Why AMMN stacked cards: keep text start-aligned (matches wider
     breakpoints; RTL-aware) instead of centering on small phones, and
     drop the 100px left pad (reserved for a side icon the SVGs render at
     top on phones) so the text fills the card instead of leaving a gap. */
  :where(.ammn-landing) .secondpart {
    text-align: start !important;
    padding: 14px 18px !important;
  }

  :where(.ammn-landing) .secondpart h1,
:where(.ammn-landing) .secondpart h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  :where(.ammn-landing) .secondpart p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  :where(.ammn-landing) .cards-stack {
    height: 260px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   BREAKPOINT: 374px — Small phones (Galaxy S, iPhone SE)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 374px) {

  :where(.ammn-landing) .inside h1, :where(.ammn-landing) .inside h2 {
    font-size: 22px !important;
  }

  :where(.ammn-landing) .footer {
    padding: 20px 12px 12px !important;
    margin: -20px 6px 0 !important;
  }

  :where(.ammn-landing) .brand img {
    width: 90px !important;
  }

  /* Hero small phone */
  
  :where(.ammn-landing) .hero-slide {
    padding: 16px 12px 0 !important;
  }

  :where(.ammn-landing) .hero-buttons .btn-primary,
:where(.ammn-landing) .hero-buttons .btn-secondary {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  }

/* === FAQ SECTION COPIED FROM src/ — overrides above === */

:where(.ammn-landing) .faq-chip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--bg-primary);
  border: 1px solid var(--n70);
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.ammn-landing) .faq-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:where(.ammn-landing) .faq-chip.active {
  background: linear-gradient(45deg, var(--sys-color-one), var(--sys-color-one-dark));
  width: 450px;
  flex-shrink: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  color: var(--n0);
  border: none;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  box-shadow: 0 24px 84px 0 var(--sys-color-one-dark);
}

[dir="rtl"] :where(.ammn-landing) .faq-chip.active {
  justify-content: right;
}

[data-theme="dark"] :where(.ammn-landing) .faq-chip {
  background: var(--bg-secondary);
  border-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

[data-theme="dark"] :where(.ammn-landing) .faq-chip.active {
  color: var(--n900);
}

:where(.ammn-landing) .faq-page__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:where(.ammn-landing) .faq-page__item {
  border-bottom: 1px solid var(--n70);
}

:where(.ammn-landing) .faq-page__item:last-child {
  border-bottom: none;
}

:where(.ammn-landing) .faq-page__question {
  cursor: pointer;
  padding: 20px 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.2s ease;
}

:where(.ammn-landing) .faq-page__question::-webkit-details-marker {
  display: none;
}

:where(.ammn-landing) .faq-page__question::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--sys-color-one);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

:where(.ammn-landing) .faq-page__item[open] .faq-page__question::after {
  content: "\2212";
  transform: rotate(180deg);
}

:where(.ammn-landing) .faq-page__question:hover {
  color: var(--sys-color-one);
}

:where(.ammn-landing) .faq-page__answer {
  padding: 0 0 20px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  animation: faqFadeIn 0.3s ease;
}

[dir="rtl"] :where(.ammn-landing) .faq-page__question {
  text-align: right;
}

[dir="rtl"] :where(.ammn-landing) .faq-page__answer {
  text-align: right;
}

[data-theme="dark"] :where(.ammn-landing) .faq-page__item {
  border-bottom-color: color-mix(in srgb, var(--n0) 10%, transparent);
}

:where(.ammn-landing) .faq-chip {
    opacity: 0.4;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

:where(.ammn-landing) .faq-chip.active {
    opacity: 1;
    transform: scale(1.05);
    width: auto !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--sys-color-one) 35%, transparent) !important;
    border: none !important;
}

/* === END FAQ COPY === */

/* ──────────────────────────────────────────────────────────────────────
   Section headline — hold it on ONE line on phones.

   .section-header carries its desktop padding-inline (80px, or 40px/80px in
   RTL) at every width. At 320px that left the heading just 200px of the 320px
   screen and broke "حماية لكل ما يهمّك في حياتك." across three lines. Trim the
   padding and scale the type with the viewport instead of the fixed 36px.

   7vw is measured, not guessed: this headline needs 12.5px of line width per
   1px of font-size, so 7vw keeps it on one line from 320px up while the cap
   restores the design size as soon as there is room.
   ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   Mobile payment carousel — switch on the PANELS, not on a class.

   The layout used to hang on `.has-pay-mobile-panels`, which initPayMobile
   adds to the section at runtime. On the Blazor landing the section is a
   Blazor-rendered element, so hydration rewrites its class attribute and the
   class is lost — the carousel rendered while the desktop fan-out stayed on
   screen underneath it.

   The panels' own presence is the condition, so nothing has to survive a
   re-render. The class-based rules above are left alone: the static landing
   still sets it, and both selectors describe the same state.
   ────────────────────────────────────────────────────────────────────── */

/* Blazor renders the panels at every width, so hide them outside the carousel
   breakpoint — otherwise they stack under the fan-out on desktop. */

/* ── Very narrow phones (<=360px) ──────────────────────────────────────────
   Measured at 320px: .brand 90 + .nav-btnss 255 + 24 padding = 369 in a 320
   viewport, so the row overflowed by 37px and — this being RTL — the LAST child
   was pushed off the left edge. That child is the hamburger, leaving 5 of its
   42px visible and the whole site navigation effectively unreachable.

   Recovers the 37px by tightening spacing only. Nothing is hidden: the language
   switcher and both theme toggles stay, because on a 320px phone they are not
   reachable anywhere else once the menu button is gone. */
@media (max-width: 360px) {
  :where(.ammn-landing) .navbar {
    padding-inline: 8px !important;
  }

  /* 109px -> ~86px. The three language labels keep their full text; only the
     padding around them shrinks. */
  :where(.ammn-landing) .lang-toggle {
    gap: 0 !important;
  }

  :where(.ammn-landing) .lang-toggle button,
:where(.ammn-landing) .lang-toggle .lang-btn {
    padding-inline: 5px !important;
    font-size: 11px !important;
  }

  }