/* One optical scale for the outline symbol and the wordmark. */
.template-home .hero h1.brand-lockup {
  display: flex;
  align-items: baseline;
  gap: .14em;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  color: #f4f6fa;
  -webkit-text-stroke: 0;
  filter: none;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 96px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
}

.brand-lockup-text {
  display: block;
  white-space: nowrap;
  background: linear-gradient(90deg, #54d7d6 0%, #60bfe9 55%, #78a8f3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.brand-domain-dot {
  display: inline-block;
  margin-left: .035em;
  font-size: .65em;
  letter-spacing: 0;
}

.hero-ai-logo {
  display: block;
  flex: none;
  width: auto;
  height: .62em;
  aspect-ratio: 1067 / 902;
  object-fit: contain;
  transform: none;
  filter: none;
}

.template-home .brand,
.detail-page .brand {
  align-items: center;
  gap: 9px;
}

.template-home .brand-word,
.detail-page .brand-word {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.site-ai-logo {
  display: block;
  flex: none;
  width: 24px;
  height: 20px;
  object-fit: contain;
  transform: translateY(-1px);
  filter: none;
}

@media (max-width: 1200px) {
  .template-home .hero h1.brand-lockup { font-size: 80px; }
}
@media (max-width: 900px) {
  .template-home .hero h1.brand-lockup { font-size: 64px; }
}
@media (max-width: 760px) {
  .template-home .hero h1.brand-lockup { font-size: 56px; }
}
@media (max-width: 600px) {
  .template-home .hero h1.brand-lockup { font-size: 44px; }
}
@media (max-width: 380px) {
  .template-home .hero h1.brand-lockup { font-size: 38px; }
}