/* Base hint style */
.hint {
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  border-left: 4px solid;
  font-size: 15px;
  line-height: 1.7;
}

.hint p {
  margin: 0;
}

.hint p + p {
  margin-top: 8px;
}

/* info — upsells, links, "learn more" callouts */
.hint-info {
  background: #f0f7ff;
  border-left-color: #4183c4;
  color: #1a3a5c;
}

/* tip — standalone helpful text, no redirection */
.hint-tip {
  background: #f0fff4;
  border-left-color: #2fa357;
  color: #1a3c2a;
}

/* important — key warnings, translation banners, must-read */
.hint-important {
  background: #f5eeff;
  border-left-color: #9b59b6;
  color: #5b3a7a;
}

/* note — event announcements, congratulations, neutral callouts */
.hint-note {
  background: #fffbf0;
  border-left-color: #f0ad4e;
  color: #5c4a1a;
}