/* Hianma commercial page — How it works focused anchor composition.
   Presentation-only refinement: no copy, asset, translation, route or product logic changes.
   Goal: when #how-it-works is opened from the menu, the whole useful section is readable
   in one desktop/tablet viewport without exposing the previous or next section. */

body .hm-marketing #how-it-works {
  --hm-how-header: var(--hm-commercial-header-height, var(--commercial-fixed-header-height, 74px));
  --hm-how-scroll-gap: 14px;
  position: relative;
  z-index: 1;
  min-height: calc(100svh - var(--hm-how-header) - var(--hm-how-scroll-gap));
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 0 !important;
  background: #fff;
  overflow: clip;
}

/* Cover the small scroll gap left by the sticky navigation helper so no previous
   section seam can remain visible when the anchor is opened. */
body .hm-marketing #how-it-works::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 26px;
  background: #fff;
  pointer-events: none;
  z-index: 0;
}

body .hm-marketing #how-it-works > .hm-container {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - var(--hm-how-header) - var(--hm-how-scroll-gap));
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: clamp(14px, 2vh, 22px);
  padding-top: clamp(4px, .8vh, 8px);
  padding-bottom: clamp(4px, .8vh, 8px);
}

/* Upper text + approved illustration: compact enough to leave the complete three-step
   row visible, while keeping the existing visual hierarchy and copy untouched. */
body .hm-marketing #how-it-works .hm-final-heading {
  width: min(1160px, 100%);
  min-height: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .94fr) minmax(380px, 1.06fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: clamp(40px, 4.8vw, 68px) !important;
  row-gap: 0 !important;
  align-items: center !important;
  align-content: center !important;
  text-align: left !important;
}

body .hm-marketing #how-it-works .hm-final-heading > .hm-final-eyebrow,
body .hm-marketing #how-it-works .hm-final-heading > h2,
body .hm-marketing #how-it-works .hm-final-heading > p {
  grid-column: 1 !important;
  max-width: 620px;
}

body .hm-marketing #how-it-works .hm-final-heading > h2 {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

body .hm-marketing #how-it-works .hm-final-heading > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.48 !important;
}

body .hm-marketing #how-it-works .hm-final-heading::after {
  grid-column: 2 !important;
  grid-row: 1 / 4 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(100%, 440px) !important;
  margin: 0 !important;
}

/* The complete information set in this section is three steps. Keep all three fully
   readable together in the same desktop/tablet viewport. */
body .hm-marketing #how-it-works .hm-final-step-grid {
  width: min(1060px, 100%);
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
  align-items: stretch !important;
}

body .hm-marketing #how-it-works .hm-final-step-grid > article {
  min-height: 0 !important;
  padding: 14px 18px 13px !important;
}

body .hm-marketing #how-it-works .hm-final-step-number {
  line-height: 1 !important;
}

body .hm-marketing #how-it-works .hm-final-step-grid h3 {
  margin-top: 7px !important;
  margin-bottom: 5px !important;
}

body .hm-marketing #how-it-works .hm-final-step-grid p {
  margin: 0 !important;
  line-height: 1.42 !important;
}

/* Short laptop screens such as 1366×768 / 1280×720. */
@media (min-width: 1121px) and (max-height: 820px) {
  body .hm-marketing #how-it-works > .hm-container {
    row-gap: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  body .hm-marketing #how-it-works .hm-final-heading {
    width: min(1090px, 100%);
    grid-template-columns: minmax(0, .98fr) minmax(340px, 1.02fr) !important;
    column-gap: 34px !important;
  }

  body .hm-marketing #how-it-works .hm-final-heading::after {
    width: min(100%, 350px) !important;
  }

  body .hm-marketing #how-it-works .hm-final-heading > h2 {
    margin-top: 5px !important;
    margin-bottom: 7px !important;
  }

  body .hm-marketing #how-it-works .hm-final-heading > p {
    line-height: 1.38 !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid {
    width: min(1040px, 100%);
    gap: 14px !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid > article {
    padding: 11px 16px 11px !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid h3 {
    margin-top: 5px !important;
    margin-bottom: 4px !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid p {
    line-height: 1.34 !important;
  }
}

/* Tablet: use the actual measured header height and keep all three steps together. */
@media (min-width: 761px) and (max-width: 1120px) {
  body .hm-marketing #how-it-works {
    min-height: calc(100svh - var(--hm-how-header) - var(--hm-how-scroll-gap));
  }

  body .hm-marketing #how-it-works::before {
    top: -20px;
    height: 22px;
  }

  body .hm-marketing #how-it-works > .hm-container {
    min-height: calc(100svh - var(--hm-how-header) - var(--hm-how-scroll-gap));
    row-gap: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body .hm-marketing #how-it-works .hm-final-heading {
    width: min(920px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(280px, .88fr) !important;
    column-gap: 26px !important;
  }

  body .hm-marketing #how-it-works .hm-final-heading::after {
    width: min(100%, 320px) !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid > article {
    padding: 12px 13px 11px !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid h3 {
    margin-top: 5px !important;
    margin-bottom: 4px !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid p {
    line-height: 1.38 !important;
  }
}

/* Mobile: keep every item present and readable. On very small screens natural scrolling
   is preferable to shrinking the copy to an unusable size, but the anchor still lands
   cleanly inside this section without showing the previous one. */
@media (max-width: 760px) {
  body .hm-marketing #how-it-works {
    min-height: calc(100svh - var(--hm-how-header) - var(--hm-how-scroll-gap));
    padding-top: 24px !important;
    padding-bottom: 56px !important;
    overflow: visible;
  }

  body .hm-marketing #how-it-works::before {
    top: -18px;
    height: 20px;
  }

  body .hm-marketing #how-it-works > .hm-container {
    min-height: 0;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  body .hm-marketing #how-it-works .hm-final-heading {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    margin-bottom: 22px !important;
  }

  body .hm-marketing #how-it-works .hm-final-heading::after {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: min(100%, 320px) !important;
    margin: 6px auto 0 !important;
  }

  body .hm-marketing #how-it-works .hm-final-step-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

body .hm-marketing:has(#how-it-works:target) .hm-header {
  border-bottom-color: transparent !important;
}