/* Approved Meeow lockup; retain the original typographic proportions. */
.meeow-logo {
  --meeow-logo-pad-x: 0px; --meeow-logo-pad-y: 0px;
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 168px; max-width: 100%; vertical-align: middle; direction: ltr;
  box-sizing: border-box; border-radius: 12px;
}
:is(.brand, .ab-brand, .sf-logo, .mw-brand) .meeow-logo > img,
.meeow-logo > img.meeow-logo__image {
  display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 180 / 52;
  object-fit: contain; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; filter: none; transform: none; animation: none; transition: none;
}
:is(.brand, .ab-brand, .sf-logo):has(> .meeow-logo) {
  min-width: 0; min-height: 44px; flex-shrink: 0; gap: 10px;
}
.sf-logo .meeow-logo { width: 144px; }
.mw-brand .meeow-logo { width: 180px; }
:root[data-theme="dark"] .meeow-logo {
  --meeow-logo-pad-x: 8px; --meeow-logo-pad-y: 5px;
  padding: var(--meeow-logo-pad-y) var(--meeow-logo-pad-x); background: #fff8ec;
}
:is(a, button):has(> .meeow-logo):focus-visible {
  outline: 3px solid var(--ds-focus, #2e749a); outline-offset: 5px; border-radius: 12px;
}

/* Reveal the approved artwork itself, preserving the custom lettering. */
.meeow-logo.is-brand-intro { position: relative; isolation: isolate; }
.meeow-logo.is-brand-intro > img.meeow-logo__image {
  animation: meeow-word-type 850ms steps(1, end) 900ms both;
}
.meeow-logo.is-brand-intro::before,
.meeow-logo.is-brand-intro::after {
  content: ''; position: absolute;
  inset: var(--meeow-logo-pad-y) var(--meeow-logo-pad-x);
  pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;
}
.meeow-logo.is-brand-intro::before {
  background-image: var(--meeow-intro-image); clip-path: inset(0 70% 0 0);
  animation: meeow-mark-arrive 850ms cubic-bezier(.22, .8, .24, 1) both;
}
.meeow-logo.is-brand-intro::after {
  z-index: 1;
  background-image: linear-gradient(110deg, transparent 36%, rgb(255 255 255 / .16) 43%, rgb(255 255 255 / .76) 49%, rgb(255 255 255 / .18) 55%, transparent 62%);
  background-size: 260% 100%;
  mask-image: var(--meeow-intro-image); mask-size: 100% 100%; mask-repeat: no-repeat;
  -webkit-mask-image: var(--meeow-intro-image); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  animation: meeow-logo-shine 800ms ease-in-out 1850ms both;
}
@keyframes meeow-mark-arrive {
  0% { opacity: 0; transform: translateX(70%) scale(.96); }
  18%, 35% { opacity: 1; transform: translateX(70%) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes meeow-word-type {
  0% { clip-path: inset(0 100% 0 30%); }
  20% { clip-path: inset(0 50.5% 0 30%); }
  40% { clip-path: inset(0 38.9% 0 30%); }
  60% { clip-path: inset(0 27.4% 0 30%); }
  80% { clip-path: inset(0 14.8% 0 30%); }
  100% { clip-path: inset(0 0 0 30%); }
}
@keyframes meeow-logo-shine {
  0% { opacity: 0; background-position: 160% 50%; }
  20%, 75% { opacity: 1; }
  100% { opacity: 0; background-position: -60% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .meeow-logo.is-brand-intro > img.meeow-logo__image { animation: none; clip-path: none; }
  .meeow-logo.is-brand-intro::before, .meeow-logo.is-brand-intro::after { display: none; animation: none; }
}
@media (max-width: 760px) {
  .site-header .header-inner:has(.meeow-logo) { gap: 8px; }
  .site-header .header-inner:has(.meeow-logo) .header-actions { gap: 2px; }
  .site-header .header-inner:has(.meeow-logo) .login-button {
    width: 44px; min-width: 44px; padding-inline: 0; justify-content: center;
  }
  .site-header .header-inner:has(.meeow-logo) .login-button span { display: none; }
  .meeow-logo { width: 136px; }
  .sf-logo .meeow-logo { width: 128px; }
  .mw-brand .meeow-logo { width: 160px; }
  .nh-head .brand:has(> .meeow-logo) { gap: 8px; }
  .nh-head .brand:has(> .meeow-logo) > span { font-size: .8rem; }
  .nh-head .brand:has(> .meeow-logo) > span small { display: none; }
}
@media (min-width: 360px) and (max-width: 389px) {
  .site-header .meeow-logo { width: 112px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .site-header .header-inner:has(.meeow-logo) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding-block: 8px;
  }
  .site-header .header-inner:has(.meeow-logo) > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header .header-inner:has(.meeow-logo) > .header-actions { grid-column: 2; grid-row: 1; margin: 0; }
  .site-header .header-inner:has(.meeow-logo) > .desktop-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; margin: 0; }
  .site-header .header-inner:has(.meeow-logo) .login-button { width: 44px; min-width: 44px; padding-inline: 0; justify-content: center; }
  .site-header .header-inner:has(.meeow-logo) .login-button span { display: none; }
  .site-header .header-inner:has(.meeow-logo) .login-mio { flex-shrink: 0; }
}
@media (max-width: 359px) {
  .site-header .header-inner:has(.meeow-logo) { display: flex; flex-wrap: wrap; gap: 2px 8px; padding-block: 6px; }
  .site-header .header-inner:has(.meeow-logo) > .brand { margin-inline: auto; }
  .site-header .header-inner:has(.meeow-logo) > .header-actions { flex: 1 1 100%; justify-content: space-between; margin: 0; }
  .nh-head:has(.meeow-logo) { flex-wrap: wrap; gap: 4px 12px; }
  .nh-head:has(.meeow-logo) > .head-nav { margin-inline-start: auto; }
}