.common-logo a,
.common-logo.looksmith-logo {
  align-items: center;
  color: var(--color-ink);
  display: flex;
  gap: 0.325em;
}

.common-logo a:before {
  background: url('/homepage/images/logo.png') center 0.2375em / auto 0.8625em no-repeat var(--color-canvas-light);
  border-radius: 0.2375em;
  box-shadow: var(--box-shadow-pill);
  content: '';
  height: 1.3em;
  width: 1.3em;
}

.common-logo a svg {
  height: 100%;
  max-height: 0.8em;
  overflow: visible;
  pointer-events: none;
  width: auto;
}

.common-header h1,
.common-header h2 {
  font-family: var(--font-family-scorekard);
  font-size: var(--font-size-xxx-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tightest);
  margin-bottom: -0.1625em;
  margin-top: -0.425em;
}

.common-header h1 a,
.common-header h2 a {
  color: inherit;
  text-decoration: none;
}

.common-header h3 {
  font-family: var(--font-family-scorekard);
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tightest);
  margin-bottom: -0.1875em;
  margin-top: -0.2em;
}

.common-header a {
  font-weight: inherit;
}

.common-content p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing-tighter);
  margin-bottom: -0.3875em;
  margin-top: -0.5625em;
}

.common-logo.looksmith-logo {
  display: inline-flex;
  gap: 0.5em;
  text-decoration: none;
}

.common-logo.looksmith-logo::before {
  content: none;
}

.common-logo.looksmith-logo .looksmith-logo__mark {
  align-items: center;
  background: var(--color-canvas-light);
  border-radius: var(--radius-tile);
  box-shadow: var(--box-shadow-pill);
  display: inline-flex;
  height: 1.55em;
  justify-content: center;
  width: 1.55em;
}

.common-logo.looksmith-logo .looksmith-logo__icon {
  height: 1.05em;
  width: 1.05em;
}

.common-logo.looksmith-logo .looksmith-logo__wordmark {
  color: var(--color-ink);
  font-family: var(--font-family-scorekard);
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
}

.purchase-disclaimer {
  color: oklch(var(--lch-ink-medium));
  display: block;
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-loose);
  margin-inline: auto;
  margin-top: var(--space-small);
  max-width: 36em;
  text-align: center;
  text-wrap: pretty;
}

.purchase-disclaimer a {
  color: inherit;
  text-decoration: underline;
}

.flash-region {
  inset: max(16px, env(safe-area-inset-top)) 16px auto;
  pointer-events: none;
  position: fixed;
  z-index: 1200;
}

.flash-stack {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 0 auto;
}

.flash {
  max-width: min(100%, 560px);
  pointer-events: auto;
  width: 100%;
}

.flash__inner {
  animation: flash-enter-and-fade 3.2s 250ms both;
  backdrop-filter: blur(14px);
  background: oklch(var(--lch-white) / 0.08);
  border: 1px solid oklch(var(--lch-white) / 0.08);
  border-radius: 0.5rem;
  box-shadow: inset 0 1px 0 oklch(var(--lch-white) / 0.04), 0 1px 2px oklch(var(--lch-black) / 0.3);
  color: var(--color-ink);
  font-family: var(--font-family-inter);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 14px 18px;
  text-align: center;
}

@keyframes flash-enter-and-fade {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }

  12%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@media(hover: hover) {
  .common-logo a,
  .common-logo.looksmith-logo {
    transition: transform var(--transition);
    will-change: transform;
  }

  .common-logo a:before,
  .common-logo.looksmith-logo .looksmith-logo__mark {
    transition: box-shadow var(--transition);
  }

  .common-logo a:focus:before,
  .common-logo a:hover:before,
  .common-logo.looksmith-logo:focus .looksmith-logo__mark,
  .common-logo.looksmith-logo:hover .looksmith-logo__mark {
    box-shadow: var(--box-shadow-pill-hover);
  }

  .common-logo a:active,
  .common-logo.looksmith-logo:active {
    transform: scale(0.98) translateY(0.0125em);
  }
  .common-header a:focus,
  .common-header a:hover {
    color: var(--color-blue-hover);
  }
}

@media (min-width: 64em) {
  .common-header h1 strong {
    display: inline-block;
    font-size: 125%;
    font-weight: inherit;
    letter-spacing: var(--letter-spacing-tight);
    margin-top: -0.0875em;
  }
}