/* Applies the supplied left-aligned Handsfree lockup without changing existing interaction behavior. */
.hf-header-brand-button {
  display: flex;
  align-items: center;
  min-height: 42px;
  transition: background-color 180ms ease, padding 180ms ease, margin 180ms ease;
}

/* Suppress the compiled centered fallback until the live left-anchored lockup has replaced it. */
header nav > button.shrink-0:not(.hf-header-brand-button) {
  visibility: hidden;
}

.hf-header-lockup {
  display: none;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.hf-header-lockup--hero {
  display: flex;
  color: #fff;
}

.hf-header-hero-mark,
.hf-header-scrolled-mark {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(21, 91, 204, 0.24);
}

.hf-header-hero-type,
.hf-header-scrolled-type {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.hf-header-hero-type b,
.hf-header-scrolled-type b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hf-header-hero-type small,
.hf-header-scrolled-type small {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hf-header-hero-type small {
  color: rgba(255, 255, 255, 0.58);
}

.hf-header-scrolled-type {
  color: #0e1624;
}

.hf-header-scrolled-type small {
  color: #687386;
}

/* The light page surface receives the same left-aligned brand hierarchy in its dark-text variant. */
header[class*="bg-white"] .hf-header-brand-button {
  margin: 0;
  padding: 0;
  background: transparent;
}

header[class*="bg-white"] .hf-header-lockup--hero {
  display: none;
}

header[class*="bg-white"] .hf-header-lockup--scrolled {
  display: flex;
}

.handsfree-legal-header .handsfree-legal-brand {
  display: flex;
  align-items: center;
}

.hf-legal-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: left;
}

.hf-legal-mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(21, 91, 204, 0.24);
}

.hf-legal-type {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.hf-legal-type b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hf-legal-type small {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.handsfree-legal-header-centered {
  padding-left: 214px;
}

@media (max-width: 640px) {
  .hf-header-hero-mark,
  .hf-header-scrolled-mark {
    width: 33px;
    height: 33px;
  }

  .hf-header-hero-type b,
  .hf-header-scrolled-type b {
    font-size: 15px;
  }

  .hf-header-hero-type small,
  .hf-header-scrolled-type small {
    font-size: 8px;
  }

  .hf-legal-mark {
    width: 34px;
    height: 34px;
  }

  .hf-legal-type b {
    font-size: 15px;
  }

  .hf-legal-type small {
    font-size: 8px;
  }

  /* Match the original compact modal-header behavior: the official mark remains left-anchored while the title retains room to breathe. */
  .hf-legal-type {
    display: none;
  }

  .handsfree-legal-header-centered {
    padding-left: 146px;
    padding-right: 72px;
  }
}

@media (max-width: 360px) {
  .hf-header-hero-mark,
  .hf-header-scrolled-mark {
    width: 31px;
    height: 31px;
  }

  .hf-legal-mark {
    width: 32px;
    height: 32px;
  }

  .handsfree-legal-header-centered {
    padding-left: 128px;
  }
}