/* Japanese typography needs a different scale from the Latin display type. */
html[lang="ja"] .hero-grid {
  align-items: start;
  grid-template-columns: 1.16fr .84fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}

html[lang="ja"] .hero h1 {
  max-width: 660px;
  margin-bottom: 1.6rem;
  font-size: clamp(3rem, 4.3vw, 4.1rem);
  line-height: 1.18;
  letter-spacing: -.075em;
}

html[lang="ja"] .app-demo {
  margin-top: 2rem;
}

html[lang="ja"] h2 {
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  line-height: 1.28;
  letter-spacing: -.045em;
}

html[lang="ja"] .section {
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

html[lang="ja"] .lead,
html[lang="ja"] .prose {
  line-height: 1.9;
}

html[lang="ja"] .large {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.75;
}

@media (max-width: 760px) {
  html[lang="ja"] .hero-grid {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(2.75rem, 12.5vw, 3.75rem);
    line-height: 1.18;
  }

  html[lang="ja"] .app-demo {
    margin-top: 0;
  }
}