/* Il problema: messaggi nello stile coerente con le card Retail. */
html body .problem {
  padding: 10px 0 18px !important;
  background: #fff !important;
  color: #07245c !important;
}

html body .problem .problem__inner {
  width: min(100% - 76px, 1120px) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

html body .problem .problem__title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 25px !important;
  color: #07245c !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -.055em !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

html body .problem .problem__grid {
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body .problem .problem-card,
html body .problem .problem-card:nth-child(n) {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex !important;
  width: auto !important;
  min-height: 132px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #0da7f7 0%, #078cf0 100%) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .22), 0 0 30px rgba(7, 140, 240, .18) !important;
  color: #fff !important;
  overflow: visible !important;
  text-align: left !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  animation: none !important;
}

html body .problem .problem-card::before { display: none !important; }

html body .problem .problem-card::after {
  position: absolute !important;
  right: -14px !important;
  bottom: 14px !important;
  left: auto !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  background: #078cf0 !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
  content: "" !important;
  transform: none !important;
}

html body .problem .problem-card p {
  position: relative !important;
  z-index: 1 !important;
  max-width: none !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .problem .problem-card:hover {
    box-shadow: 0 20px 42px rgba(0, 0, 0, .28), 0 0 34px rgba(7, 140, 240, .28) !important;
    transform: translateY(-5px) !important;
  }
}

@media (max-width: 800px) {
  html body .problem { padding: 10px 0 14px !important; }
  html body .problem .problem__inner { width: calc(100% - 32px) !important; }
  html body .problem .problem__title { margin-bottom: 25px !important; }
  html body .problem .problem__grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  html body .problem .problem-card,
  html body .problem .problem-card:nth-child(n) { min-height: 92px !important; padding: 16px !important; border-radius: 23px !important; }
  html body .problem .problem-card p { font-size: 15px !important; line-height: 1.33 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .problem .problem-card { transition: none !important; }
  html body .problem .problem-card:hover { transform: none !important; }
}