.hero-brand-viewport {
  --brand-size: clamp(3.65rem, 6.4vw, 5.2rem);
  --brand-row: calc(var(--brand-size) * 1.12);
  display: block;
  width: min(100%, 23rem);
  height: var(--brand-row);
  overflow: hidden;
  background: #fff;
}

.hero-brand-track {
  display: block;
  height: 100%;
}

.hero-brand-viewport .hero-title-target,
.hero-brand-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--brand-row);
}

.hero-brand-sequence {
  display: contents;
}

.hero-brand-lockup {
  display: block;
  max-width: 100%;
  max-height: 93%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hero-brand-claude {
  max-height: 107%;
}

.hero-brand-chatgpt {
  max-height: 102%;
}

.hero-brand-perplexity {
  width: min(94%, 21rem);
}

.hero-brand-deepseek {
  width: min(83%, 18rem);
}

/* Frame the uploaded lockups by cropping only the surrounding white space. */
.hero-brand-frame-gemini,
.hero-brand-frame-grok-bot {
  overflow: hidden;
}

.hero-brand-frame-gemini img,
.hero-brand-frame-grok-bot img {
  flex: none;
  max-width: none;
  max-height: none;
  mix-blend-mode: multiply;
}

.hero-brand-frame-gemini img {
  width: 126%;
  transform: translate(3%, 3.4%);
}

.hero-brand-frame-grok-bot img {
  width: 108%;
  transform: translate(1.5%, 1%);
}

.hero-brand-viewport.is-rotating .hero-brand-track {
  animation: hero-brand-rotate 23.8s cubic-bezier(.55, 0, .2, 1) infinite;
}

@keyframes hero-brand-rotate {
  0%, 11.428571% { transform: translateY(0); }
  14.285714%, 25.714286% { transform: translateY(-100%); }
  28.571429%, 40% { transform: translateY(-200%); }
  42.857143%, 54.285714% { transform: translateY(-300%); }
  57.142857%, 68.571429% { transform: translateY(-400%); }
  71.428571%, 82.857143% { transform: translateY(-500%); }
  85.714286%, 97.142857% { transform: translateY(-600%); }
  100% { transform: translateY(-700%); }
}

@media (max-width: 700px) {
  .hero-brand-viewport {
    --brand-size: clamp(3.5rem, 15vw, 4.1rem);
    width: min(100%, 19rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand-viewport.is-rotating .hero-brand-track {
    animation: none;
  }

}

.hero-brand-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}