.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #176f5a;
  text-decoration: none;
}

.brand-lockup .brand-lockup__mascot,
.brand .brand-lockup__mascot,
.admin-brand .brand-lockup__mascot,
.team-join-page .admin-brand .brand-lockup__mascot,
.customer-progress-page .admin-brand .brand-lockup__mascot {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(23, 111, 90, .16));
}

.brand,
.admin-brand,
.review-brand,
.logo-link {
  text-decoration: none;
}

.brand-lockup__copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1;
}

.brand-lockup__copy strong {
  color: #1d7f69;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.7px;
  white-space: nowrap;
}

.brand-lockup__copy small {
  color: #8aa79b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.35px;
  white-space: nowrap;
}

.mascot-guide-card {
  position: relative;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 14px;
  margin: 14px 16px 0;
  padding: 12px 16px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(39, 154, 122, .2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 6% 15%, rgba(255, 229, 128, .35), transparent 28%),
    linear-gradient(135deg, rgba(237, 255, 248, .96), rgba(255, 250, 232, .96));
  box-shadow: 0 14px 30px rgba(37, 93, 73, .09);
}

.mascot-guide-card::after {
  position: absolute;
  top: -28px;
  right: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 224, 111, .18);
  content: "";
}

.mascot-guide-card > img,
.page-mascot {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(23, 111, 90, .14));
}

.mascot-guide-card div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.mascot-guide-card small,
.mascot-inline-guide small {
  color: #a56d16;
  font-size: 11px;
  font-weight: 850;
}

.mascot-guide-card strong,
.mascot-inline-guide strong {
  color: #123f33;
  font-size: 17px;
  line-height: 1.3;
}

.mascot-guide-card p,
.mascot-inline-guide p {
  margin: 0;
  color: #597269;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

.mascot-inline-guide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 12px auto 0;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(39, 154, 122, .16);
  border-radius: 18px;
  background: rgba(242, 255, 248, .82);
  text-align: left;
}

.mascot-inline-guide .page-mascot {
  width: 66px;
  height: 66px;
}

.admin-hero.has-page-mascot {
  position: relative;
  padding-right: 142px;
  overflow: hidden;
}

.admin-hero.has-page-mascot > .page-mascot {
  position: absolute;
  right: 28px;
  bottom: -7px;
  width: 112px;
  height: 112px;
}

@media (min-width: 980px) {
  .brand-lockup .brand-lockup__mascot,
  .brand .brand-lockup__mascot,
  .admin-brand .brand-lockup__mascot,
  .team-join-page .admin-brand .brand-lockup__mascot,
  .customer-progress-page .admin-brand .brand-lockup__mascot {
    width: 62px;
    height: 62px;
  }

  .brand-lockup__copy strong {
    font-size: 24px;
  }

  .brand-lockup__copy small {
    font-size: 9px;
  }

  .mascot-guide-card {
    margin-inline: 0;
  }
}

@media (max-width: 640px) {
  .brand-lockup {
    gap: 5px;
  }

  .brand-lockup .brand-lockup__mascot,
  .brand .brand-lockup__mascot,
  .admin-brand .brand-lockup__mascot,
  .team-join-page .admin-brand .brand-lockup__mascot,
  .customer-progress-page .admin-brand .brand-lockup__mascot {
    width: 45px;
    height: 45px;
  }

  .team-join-page .admin-brand .brand-lockup__mascot,
  .customer-progress-page .admin-brand .brand-lockup__mascot {
    width: 40px;
    height: 40px;
  }

  .brand-lockup__copy strong {
    font-size: 17px;
    letter-spacing: -.55px;
  }

  .brand-lockup__copy small {
    font-size: 6px;
    letter-spacing: 1px;
  }

  .team-join-page .brand-lockup__copy strong,
  .customer-progress-page .brand-lockup__copy strong {
    font-size: 15px;
  }

  .team-join-page .brand-lockup__copy small,
  .customer-progress-page .brand-lockup__copy small {
    font-size: 5px;
    letter-spacing: .75px;
  }

  .team-join-page .admin-topbar > span,
  .customer-progress-page .admin-topbar > span {
    flex: 0 0 auto;
    max-width: none;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .mascot-guide-card {
    gap: 8px;
    margin: 10px 10px 0;
    padding: 9px 11px 9px 7px;
    border-radius: 18px;
  }

  .mascot-guide-card > img {
    width: 72px;
    height: 72px;
  }

  .mascot-guide-card strong,
  .mascot-inline-guide strong {
    font-size: 15px;
  }

  .mascot-guide-card p,
  .mascot-inline-guide p {
    font-size: 12px;
  }

  .mascot-inline-guide {
    gap: 7px;
    padding: 7px 10px 7px 6px;
  }

  .mascot-inline-guide .page-mascot {
    width: 56px;
    height: 56px;
  }

  .admin-hero.has-page-mascot {
    min-height: 136px;
    padding-right: 92px;
  }

  .admin-hero.has-page-mascot > .page-mascot {
    right: 5px;
    bottom: -2px;
    width: 88px;
    height: 88px;
  }
}