.ha-alliance {
  position: relative;
  margin-block: 70px 35px;
  background: var(--paper, #fcfbfe);
  scroll-margin-top: 0;
}

.ha-layout {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.7fr);
  align-items: center;
  gap: clamp(45px, 7vw, 105px);
  padding-block: 62px 50px;
}

.ha-mark {
  position: relative;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ha-mark::before {
  content: '';
  position: absolute;
  inset: -86px 10% -74px;
  background: var(--pale, #f0ebf7);
  transform: rotate(-5deg);
  pointer-events: none;
}

.ha-mark::after {
  content: '';
  position: absolute;
  top: -74px;
  right: 6%;
  width: 24px;
  height: 24px;
  background: var(--sage, #d9e5c8);
}

.ha-mark img {
  position: relative;
  display: block;
  width: min(100%, 280px);
  height: auto;
  aspect-ratio: 2076 / 2077;
  object-fit: contain;
}

.ha-copy {
  position: relative;
  min-width: 0;
}

.ha-copy .eyebrow {
  margin-bottom: 17px;
}

.ha-copy h2 {
  font-size: clamp(35px, 3.5vw, 49px);
  line-height: 1.18;
  letter-spacing: -1.8px;
}

.ha-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 23px;
  color: var(--muted, #797080);
  font-size: 13px;
  line-height: 1.85;
}

.ha-options {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 27px;
  padding: 0;
  margin: 25px 0 23px;
  list-style: none;
  color: var(--purple, #483264);
  font-size: 12px;
  line-height: 1.65;
}

.ha-options li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ha-options li::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--sage, #d9e5c8);
}

.ha-options li:last-child::before {
  background: var(--accent, #74578e);
}

.ha-copy .text-link {
  font-size: 12px;
  gap: 23px;
}

.ha-conditions {
  position: relative;
  border-top: 1px solid #dcd2e7;
  padding-block: 18px 22px;
  color: var(--muted, #797080);
  font-size: 9px;
  line-height: 1.75;
}

@media (max-width: 1100px) {
  .ha-layout {
    grid-template-columns: minmax(190px, .8fr) minmax(0, 1.7fr);
    gap: 45px;
    padding-block: 50px 40px;
  }

  .ha-mark::before {
    inset: -70px 7% -64px;
  }

  .ha-mark::after {
    top: -60px;
  }

  .ha-mark img {
    width: min(100%, 240px);
  }
}

@media (max-width: 780px) {
  .ha-alliance {
    margin-block: 45px 20px;
    scroll-margin-top: 0;
  }

  .ha-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 0 30px;
  }

  .ha-mark {
    justify-content: flex-start;
    width: 205px;
    max-width: 100%;
    margin-top: -20px;
    padding: 12px 20px 16px;
  }

  .ha-mark::before {
    inset: -2px 0 0;
    transform: rotate(-4deg);
  }

  .ha-mark::after {
    top: 6px;
    right: -7px;
    width: 19px;
    height: 19px;
  }

  .ha-mark img {
    width: 165px;
  }

  .ha-copy h2 {
    font-size: 34px;
    letter-spacing: -1.3px;
  }

  .ha-copy > p:not(.eyebrow) {
    margin-top: 20px;
    font-size: 12px;
  }

  .ha-options {
    margin-block: 22px;
    gap: 12px 22px;
    font-size: 11px;
  }

  .ha-copy .text-link {
    font-size: 11px;
  }

  .ha-conditions {
    padding-block: 16px 20px;
    font-size: 9px;
  }
}