/* Keep the MissGPT mark aligned like the home page across all page templates. */
:root{
  --missgpt-header-x:clamp(16px,4vw,42px);
  --missgpt-header-y:16px;
  --missgpt-logo-size:clamp(50px,4.8vw,70px);
}

header.fixed.top-0,
.pricing-header,
.missgpt-lite-header,
.missgpt-chat-header{
  padding:var(--missgpt-header-y) var(--missgpt-header-x)!important;
}

header.fixed.top-0 > div > a[href="/"]:first-child,
.pricing-logo,
.missgpt-lite-logo,
.missgpt-chat-logo{
  position:relative!important;
  display:block!important;
  width:var(--missgpt-logo-size)!important;
  height:var(--missgpt-logo-size)!important;
  flex:0 0 var(--missgpt-logo-size)!important;
  margin:0!important;
  line-height:0!important;
  background:url("/images/brand/missgpt-mark.png") center/contain no-repeat!important;
  filter:drop-shadow(0 12px 26px rgba(70,38,92,.16))!important;
}

header.fixed.top-0 > div > a[href="/"]:first-child > svg{
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  display:block!important;
}

header.fixed.top-0 > div > a[href="/"]:first-child::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  left:auto!important;
  top:auto!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  background-image:url("/images/brand/missgpt-mark.png")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  filter:drop-shadow(0 12px 26px rgba(70,38,92,.16))!important;
  pointer-events:none!important;
}

@media (max-width:640px){
  :root{
    --missgpt-header-x:14px;
    --missgpt-header-y:12px;
    --missgpt-logo-size:50px;
  }
}