/* Hianma commercial page — final responsive containment.
   Loaded last. It deliberately restores document overflow visibility so real
   component overflow cannot be hidden by legacy global clipping. */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: visible;
}

body .hm-marketing {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: visible;
}

body .hm-marketing *,
body .hm-marketing *::before,
body .hm-marketing *::after {
  box-sizing: border-box;
}

body .hm-container,
body .hm-hero-grid,
body .hm-two-column,
body .hm-website-grid,
body .hm-three-grid,
body .hm-role-grid,
body .hm-dual-grid,
body .hm-audience-row,
body .hm-contact-grid,
body .hm-demo-form {
  min-width: 0;
  max-width: 100%;
}

body .hm-container > *,
body .hm-hero-grid > *,
body .hm-two-column > *,
body .hm-website-grid > *,
body .hm-dual-grid > *,
body .hm-contact-grid > * {
  min-width: 0;
  max-width: 100%;
}

body .hm-marketing img,
body .hm-marketing picture,
body .hm-marketing video,
body .hm-marketing canvas,
body .hm-marketing svg {
  max-width: 100%;
}

body .hm-marketing input,
body .hm-marketing select,
body .hm-marketing textarea,
body .hm-marketing button,
body .hm-marketing a {
  min-width: 0;
}

body .hm-demo-form input,
body .hm-demo-form select,
body .hm-demo-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body .hm-contact-channels,
body .hm-check-list,
body .hm-proof-row,
body .hm-activity-line,
body .hm-browser-bar,
body .hm-mini-brand,
body .hm-window-pill {
  min-width: 0;
}

body .hm-contact-channels a,
body .hm-contact-channels p,
body .hm-check-list span,
body .hm-proof-row span,
body .hm-activity-line span {
  overflow-wrap: anywhere;
}

/* Decorative commercial scenes are locally contained instead of clipping the document. */
body .hm-hero,
body .hm-mission,
body .hm-roles,
body .hm-connected,
body .hm-website,
body .hm-audience,
body .hm-dual-values,
body .hm-quote,
body .hm-contact {
  max-width: 100%;
  overflow-x: clip;
}

body .hm-header {
  box-sizing: border-box;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
}

body .hm-header-actions,
body .hm-brand,
body .hm-nav {
  min-width: 0;
  max-width: 100%;
}

body .hm-product-stage,
body .hm-product-window,
body .hm-product-body,
body .hm-product-content,
body .hm-stat-row,
body .hm-activity-card {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  body .hm-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  body .hm-header .hm-nav {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--hm-sticky-header-height, 68px) - max(20px, env(safe-area-inset-bottom)));
    overscroll-behavior: contain;
  }

  body .hm-hero-grid,
  body .hm-container,
  body .hm-mission > .hm-container,
  body .hm-roles > .hm-container,
  body .hm-connected > .hm-container,
  body .hm-website > .hm-container,
  body .hm-audience > .hm-container,
  body .hm-dual-values > .hm-container,
  body .hm-contact > .hm-container {
    width: min(calc(100% - 24px), 1180px);
    max-width: calc(100% - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    margin-inline: auto;
  }

  body .hm-product-stage::before {
    right: 0;
    width: min(82vw, 340px);
    height: min(82vw, 340px);
  }

  body .hm-product-window {
    width: 100%;
    margin-inline: 0;
    transform: none;
  }

  body .hm-product-body {
    grid-template-columns: minmax(44px, 52px) minmax(0, 1fr) !important;
  }

  body .hm-product-content {
    overflow: hidden;
  }

  body .hm-stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body .hm-hian-card {
    max-width: min(34vw, 132px);
    margin-right: 0;
  }

  body .hm-hero-actions,
  body .hm-contact-channels,
  body .hm-audience-row {
    max-width: 100%;
  }

  body .hm-button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  body .hm-demo-form {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 430px) {
  body .hm-header {
    gap: 6px;
  }

  body .hm-header-actions {
    gap: 5px;
  }

  body .hm-language {
    flex: 1 1 auto;
    min-width: 0;
  }

  body .hm-language button {
    min-width: 0;
    flex: 1 1 0;
  }

  body .hm-login {
    min-width: 0;
    padding-inline: 9px;
  }

  body .hm-menu {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
  }

  body .hm-product-body {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  body .hm-product-sidebar {
    width: 46px;
    min-width: 46px;
    padding-inline: 6px;
  }

  body .hm-product-sidebar span {
    width: 32px;
    height: 32px;
  }

  body .hm-product-content {
    padding-inline: 10px;
  }

  body .hm-stat-row article {
    padding-inline: 5px;
  }
}

@media (max-width: 360px) {
  body .hm-header {
    padding-inline: 8px;
  }

  body .hm-language button {
    padding-inline: 3px;
    font-size: .56rem;
  }

  body .hm-login {
    padding-inline: 7px;
    font-size: .7rem;
  }

  body .hm-hero h1 {
    font-size: clamp(2rem, 11vw, 2.45rem);
  }

  body .hm-product-body {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  body .hm-product-sidebar {
    width: 42px;
    min-width: 42px;
    padding-inline: 5px;
  }

  body .hm-product-sidebar span {
    width: 30px;
    height: 30px;
  }
}