/* Load after Tailwind CDN — utilities use important: #rd-products-scope */

#rd-products-scope #products,
#rd-products-scope #about-dmon {
  scroll-margin-top: calc(var(--navbar-height, 72px) + 16px);
}

/* Tailwind uses important: #rd-products-scope — overrides need !important */
@media (min-width: 768px) {
  #rd-products-scope .rd-products-intro,
  #rd-products-scope .md\:mb-20 {
    margin-bottom: 3rem !important;
  }

  #rd-products-scope .rd-products-intro__title,
  #rd-products-scope .md\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 3rem !important;
  }

  #rd-products-scope #products {
    padding-top: 3.5rem !important;
    padding-bottom: 4rem !important;
  }
}

.dia-benefit-pills {
  align-items: start;
}

.dia-benefit-pill {
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  cursor: default;
  transition: background-color 0.2s ease;
}

.dia-benefit-pill:hover,
.dia-benefit-pill:focus-within {
  background-color: rgb(248 250 252);
}

.dia-benefit-pill__sub {
  max-width: 11rem;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgb(100 116 139);
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    margin-top 0.2s ease;
}

.dia-benefit-pill:hover .dia-benefit-pill__sub,
.dia-benefit-pill:focus-within .dia-benefit-pill__sub {
  max-height: 3.5rem;
  margin-top: 0.375rem;
  opacity: 1;
}

@media (max-width: 767.98px) {
  #rd-products-scope {
    overflow-x: hidden;
    max-width: 100%;
  }

  #rd-products-scope #products {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #rd-products-scope .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }

  #rd-products-scope .rd-product-article,
  #rd-products-scope .rd-product-showcase-card,
  #rd-products-scope .rd-product-showcase-card > .grid {
    min-width: 0;
    max-width: 100%;
  }

  #rd-products-scope .rd-product-glow {
    inset: 0;
  }

  #rd-products-scope .rd-product-visual-panel {
    min-height: 0 !important;
  }

  #rd-products-scope .rd-product-visual-panel .p-6,
  #rd-products-scope .rd-product-visual-panel .md\:p-8 {
    padding: 1rem !important;
  }

  #rd-products-scope .rd-product-showcase-card > .grid > div:not(.rd-product-visual-panel) {
    padding: 1.25rem !important;
  }

  #rd-products-scope .text-5xl,
  #rd-products-scope .md\:text-6xl {
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
  }

  #rd-products-scope .product-details-panel {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}