/* NESkills v152: mobile-only hero tightening + universal stacked-card motion */
@media (max-width: 767px) {
  /* The mobile header is sticky and already occupies its own 76px row.
     Page heroes therefore need only a compact breathing space below it. */
  main > .mobile-hero-tight,
  main > section.mobile-hero-tight {
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 26px !important;
    align-items: flex-start !important;
  }

  /* Homepage spacing is carried by the inner hero grid rather than the section. */
  .home80-hero.mobile-hero-tight {
    padding-top: 0 !important;
  }

  .mobile-hero-tight .home80-hero-grid {
    padding-top: 26px !important;
  }

  /* Prevent old page-level hero rules from reintroducing an empty band. */
  .mobile-hero-tight > .container:first-child,
  .mobile-hero-tight > [class*="container"]:first-child {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html,
  body {
    overflow-x: clip !important;
  }

  .mobile-sticky-overflow-fix {
    overflow: visible !important;
    contain: none !important;
  }

  .mobile-sticky-transform-fix {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .mobile-sticky-stack[data-sticky-ready="true"] {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    contain: none !important;
    isolation: isolate !important;
    scroll-snap-type: none !important;
  }

  .mobile-sticky-stack[data-sticky-ready="true"] > * {
    position: sticky !important;
    inset-inline: auto !important;
    top: calc(var(--nx-sticky-top, 16px) + var(--nx-sticky-step, 0px)) !important;
    z-index: calc(30 + var(--nx-sticky-index, 0)) !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 16px !important;
    opacity: 1 !important;
    transform: none !important;
    backface-visibility: hidden;
    isolation: isolate;
    box-shadow: 0 20px 46px rgba(6, 19, 38, 0.16) !important;
  }

  .mobile-sticky-stack[data-sticky-ready="true"] > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Small contact/proof cards receive a restrained shadow rather than a heavy panel shadow. */
  .contact103-details.mobile-sticky-stack[data-sticky-ready="true"] > *,
  .about102-proof-links.mobile-sticky-stack[data-sticky-ready="true"] > *,
  .five104-inline-links.mobile-sticky-stack[data-sticky-ready="true"] > * {
    box-shadow: 0 12px 28px rgba(6, 19, 38, 0.12) !important;
  }
}

@media (min-width: 768px), (prefers-reduced-motion: reduce) {
  .mobile-sticky-stack > * {
    --nx-sticky-step: 0px;
    --nx-sticky-index: 0;
  }
}

/* v153 fix: opaque mobile sticky cards for Fees page dark-section stack */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .pricing101-page .fees101-value-list.mobile-sticky-stack[data-sticky-ready="true"] > article {
    background: #10243e !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .pricing101-page .fees101-value-list.mobile-sticky-stack[data-sticky-ready="true"] > article strong {
    color: #f4b400 !important;
  }

  .pricing101-page .fees101-value-list.mobile-sticky-stack[data-sticky-ready="true"] > article span {
    color: rgba(255, 248, 236, 0.78) !important;
  }
}

/* NESkills v154: compact hero start on every page, mobile only.
   The #main selector deliberately outranks the older global first-section rule. */
@media (max-width: 767px) {
  body main#main > section.mobile-hero-tight:first-child {
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 18px !important;
    align-items: flex-start !important;
  }

  body main#main > section.mobile-hero-tight:first-child > .container:first-child,
  body main#main > section.mobile-hero-tight:first-child > [class*="container"]:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* The homepage carries its top space on the inner grid. */
  body.homepage main#main > section.home80-hero.mobile-hero-tight:first-child {
    padding-top: 0 !important;
  }

  body.homepage main#main > section.home80-hero.mobile-hero-tight:first-child .home80-hero-grid {
    margin-top: 0 !important;
    padding-top: 18px !important;
    align-items: start !important;
  }
}