/* Hianma commercial page — shared section title for Languages + Security.
   Presentation only: the two existing card labels/titles stay untouched.
   Desktop/laptop: title sits outside the cards, above the complete section composition. */

body .hm-marketing #languages-security {
  position: relative !important;
}

body .hm-marketing #languages-security::before {
  content: "MULTILINGUE ET SÉCURISÉ";
  position: absolute;
  z-index: 3;
  top: clamp(18px, 2.6vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 48px);
  min-height: 36px;
  padding: 8px 18px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;
  background: #f6f9ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
  pointer-events: none;
}

html[lang="fr"] body .hm-marketing #languages-security::before {
  content: "MULTILINGUE ET SÉCURISÉ";
}

html[lang="en"] body .hm-marketing #languages-security::before {
  content: "MULTILINGUAL & SECURE";
}

html[lang="lo"] body .hm-marketing #languages-security::before {
  content: "ຫຼາຍພາສາ ແລະ ປອດໄພ";
  letter-spacing: 0.04em;
}

html[lang="th"] body .hm-marketing #languages-security::before {
  content: "หลายภาษาและปลอดภัย";
  letter-spacing: 0.04em;
}

html[lang="vi"] body .hm-marketing #languages-security::before {
  content: "ĐA NGÔN NGỮ & AN TOÀN";
}

/* Keep enough breathing room between the new section title and the existing composition. */
@media (min-width: 900px) {
  body .hm-marketing #languages-security > .hm-dual-grid {
    padding-top: clamp(58px, 7vh, 72px) !important;
  }
}

/* Short laptop screens: preserve the one-screen composition. */
@media (min-width: 1121px) and (max-height: 850px) {
  body .hm-marketing #languages-security::before {
    top: 12px;
    min-height: 32px;
    padding: 7px 15px;
    font-size: 11px;
  }

  body .hm-marketing #languages-security > .hm-dual-grid {
    padding-top: 48px !important;
    padding-bottom: 12px !important;
  }
}

/* Tablet portrait and phones: put the section title back into normal flow. */
@media (max-width: 899px) {
  body .hm-marketing #languages-security::before {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 0 auto 22px;
  }

  body .hm-marketing #languages-security > .hm-dual-grid {
    padding-top: 0 !important;
  }
}