/* Product catalog and detail banners share the same procurement facts. */
.inner-page .uniform-banner.product-benefits-banner {
  display:grid!important;
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  column-gap:clamp(24px,3vw,60px);
  align-items:center!important;
}

.uniform-banner.product-benefits-banner>div {
  min-width:0;
  width:100%;
  grid-template-rows:auto auto auto;
  row-gap:16px;
}

.inner-page .uniform-banner.product-benefits-banner h1 {
  font-size:clamp(32px,3.3vw,60px);
  line-height:1.12;
  max-width:100%;
  overflow-wrap:anywhere;
}

.inner-page .uniform-banner.product-benefits-banner p {
  max-width:60ch;
}

.product-benefits-banner .product-benefits {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  align-content:center;
  justify-content:center;
  gap:18px 12px;
  width:100%;
  max-width:600px;
  min-width:0;
  margin:0 0 0 auto;
  padding:8px 0 20px;
  list-style:none;
}

.product-benefits-banner .product-benefit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:12px clamp(15px,1.3vw,24px);
  border:1px solid #c8dfd3;
  border-radius:999px;
  background:#f8fcf9;
  color:#52675e;
  box-shadow:0 6px 16px #244f4108;
  font-size:clamp(14px,1.1vw,20px);
  line-height:1.4;
  font-weight:400;
  text-align:center;
  white-space:nowrap;
  animation:product-benefit-float 6s ease-in-out infinite;
}

.product-benefits-banner .product-benefit strong {
  color:#285e50;
  font-weight:600;
}

.product-benefits-banner .product-benefit:nth-child(2) {
  translate:0 12px;
  animation-duration:6.7s;
  animation-delay:-2.1s;
}

.product-benefits-banner .product-benefit:nth-child(3) {
  animation-duration:7.1s;
  animation-delay:-3.6s;
}

.product-benefits-banner .product-benefit:nth-child(4) {
  translate:0 10px;
  animation-duration:6.4s;
  animation-delay:-1.2s;
}

.product-benefits-banner .product-benefit:nth-child(5) {
  translate:0 4px;
  animation-duration:7.4s;
  animation-delay:-4.8s;
}

.product-benefits-banner .product-benefits:hover .product-benefit {
  animation-play-state:paused;
}

@keyframes product-benefit-float {
  0%,100% { transform:translateY(3px); }
  50% { transform:translateY(-4px); }
}

/* Match the site's phone and small touch-screen layout boundary. */
@media (max-width:900px), (max-width:1100px) and (hover:none) and (pointer:coarse) {
  .inner-page .uniform-banner.product-benefits-banner {
    height:auto!important;
    min-height:0!important;
    grid-template-columns:minmax(0,1fr);
    gap:26px;
    padding:32px var(--g) 38px!important;
    align-items:start!important;
  }

  .uniform-banner.product-benefits-banner>div {
    grid-template-rows:auto auto auto;
    row-gap:18px;
  }

  .inner-page .uniform-banner.product-benefits-banner h1 {
    font-size:clamp(32px,8vw,44px);
    line-height:1.16;
    max-width:26ch;
  }

  .product-benefits-banner .product-benefits {
    justify-content:flex-start;
    gap:10px;
    max-width:none;
    margin:0;
    padding:0;
  }

  .product-benefits-banner .product-benefit {
    padding:10px 16px;
    font-size:16px;
    line-height:1.4;
    box-shadow:none;
    animation:none;
    transform:none;
    translate:none;
  }

  .product-benefits-banner .product-benefit:nth-child(n) {
    translate:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .product-benefits-banner .product-benefit {
    animation:none;
    transform:none;
  }
}

/* The navigation copy stays in the scrollable links area, below certification. */
.mobile-nav-dialog .mobile-nav-benefits {
  display:flex;
  flex:none;
  flex-wrap:wrap;
  align-items:center;
  align-self:auto;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}

.mobile-nav-dialog .mobile-nav-benefits .product-benefit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:8px 12px;
  border:1px solid #c8dfd3;
  border-radius:999px;
  background:#f8fcf9;
  color:#52675e;
  font-size:14px;
  font-weight:400;
  line-height:1.4;
  text-align:center;
  white-space:nowrap;
  animation:none;
  transform:none;
  translate:none;
}

.mobile-nav-dialog .mobile-nav-benefits strong {
  color:#285e50;
  font-weight:600;
}