/* Language control is an anchor here; the shared rule was written for a button. */
a.lang-toggle {
  text-decoration: none;
}

/* EN is the link target. 中文 is the page you are on. */
html[lang="zh-Hans"] .lang-en {
  color: var(--grey);
  font-weight: 500;
}

/* Hero size is tuned for Latin caps. Full-width Chinese glyphs at that
   size overflow the text column. */
html[lang="zh-Hans"] .headline {
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: 0;
}
html[lang="zh-Hans"] .eyebrow,
html[lang="zh-Hans"] .why-eyebrow,
html[lang="zh-Hans"] .planet-label {
  letter-spacing: 0.08em;
}
@media (max-width: 960px) {
  html[lang="zh-Hans"] .headline {
    font-size: clamp(36px, 6.4vw, 56px);
  }
}
@media (max-width: 700px) {
  html[lang="zh-Hans"] .headline {
    font-size: clamp(32px, 9.2vw, 44px);
  }
}

/* The English language script is not loaded here, so body.is-ready is never added. */
html[lang="zh-Hans"] .hero .content,
html[lang="zh-Hans"] .hero .visual {
  opacity: 1;
  transform: none;
}

.hero .content a:not(.btn):not(.price-link) {
  color: var(--grey);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zh-crumbs {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px var(--gutter) 0;
  font-size: 13px;
  color: var(--grey);
}
.zh-crumbs a {
  color: var(--grey);
  text-decoration: none;
}
.zh-crumbs a:hover,
.zh-crumbs a[aria-current="page"] {
  color: var(--white);
}