/* CJK role overrides. Optical weight selection lives in assets/fonts/fonts.css. */

html[lang="ja"] .type-display-l,
html[lang="zh"] .type-display-l {
  font-family: var(--font-sans);
}

/* Display */
html[lang="ja"] .hero-title,
html[lang="zh"] .hero-title {
  font-size: calc(var(--fs-display-l) * var(--cjk-display));
  line-height: var(--cjk-lh-display);
  letter-spacing: var(--cjk-ls-display);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

html[lang="ja"] .section-head .type-h1,
html[lang="zh"] .section-head .type-h1 {
  font-size: calc(96px * var(--cjk-display));
  line-height: 1.1;
  letter-spacing: var(--cjk-ls-display);
  font-feature-settings: "palt" 1;
}

html[lang="ja"] .secondary-page .page-head h1,
html[lang="zh"] .secondary-page .page-head h1 {
  font-size: calc(var(--fs-display-l) * var(--cjk-display));
  line-height: 1.1;
  letter-spacing: var(--cjk-ls-display);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

html[lang="ja"] .footer-word span,
html[lang="zh"] .footer-word span {
  font-size: calc(var(--fs-display-xl) * var(--cjk-display));
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-feature-settings: "palt" 1;
}

html[lang="ja"] .brand-headline,
html[lang="zh"] .brand-headline {
  font-size: calc(66px * var(--cjk-title));
  line-height: 1.3;
  letter-spacing: var(--cjk-ls-title);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

html[lang="ja"] .sticky-title,
html[lang="zh"] .sticky-title {
  font-size: calc(46px * var(--cjk-title));
  line-height: 1.15;
  letter-spacing: var(--cjk-ls-display);
  font-feature-settings: "palt" 1;
}

html[lang="ja"] .type-h1,
html[lang="zh"] .type-h1 {
  font-size: calc(var(--fs-h1) * var(--cjk-title));
  line-height: 1.25;
  letter-spacing: var(--cjk-ls-title);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

/* Titles and leads */
html[lang="ja"] .type-h2,
html[lang="zh"] .type-h2,
html[lang="ja"] .type-h3,
html[lang="zh"] .type-h3,
html[lang="ja"] .feature-heading h2,
html[lang="zh"] .feature-heading h2,
html[lang="ja"] #faq-title,
html[lang="zh"] #faq-title,
html[lang="ja"] .brand-kicker,
html[lang="zh"] .brand-kicker {
  font-size: calc(var(--fs-h3) * var(--cjk-title));
  line-height: var(--cjk-lh-title);
  letter-spacing: var(--cjk-ls-title);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  line-break: strict;
}

html[lang="ja"] .intro-rest,
html[lang="zh"] .intro-rest {
  text-wrap: pretty;
}

html[lang="ja"] .secondary-page .page-kicker,
html[lang="zh"] .secondary-page .page-kicker,
html[lang="ja"] .secondary-page .page-lead,
html[lang="zh"] .secondary-page .page-lead,
html[lang="ja"] .secondary-page .secondary-section-head h2,
html[lang="zh"] .secondary-page .secondary-section-head h2,
html[lang="ja"] .secondary-page .secondary-statement,
html[lang="zh"] .secondary-page .secondary-statement,
html[lang="ja"] .secondary-page .secondary-dark-copy p,
html[lang="zh"] .secondary-page .secondary-dark-copy p {
  font-size: calc(var(--fs-h3) * var(--cjk-title));
  line-height: var(--cjk-lh-title);
  letter-spacing: var(--cjk-ls-title);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  line-break: strict;
}

html[lang="ja"] .faq-contact,
html[lang="zh"] .faq-contact {
  font-size: calc(28px * var(--cjk-title));
  line-height: 1.2;
  letter-spacing: var(--cjk-ls-title);
  font-feature-settings: "palt" 1;
}

/* Body */
html[lang="ja"] .type-body-l,
html[lang="zh"] .type-body-l,
html[lang="ja"] .type-body-m,
html[lang="zh"] .type-body-m,
html[lang="ja"] .type-body-s,
html[lang="zh"] .type-body-s,
html[lang="ja"] .scroll-section p,
html[lang="zh"] .scroll-section p,
html[lang="ja"] .feature-menu p,
html[lang="zh"] .feature-menu p,
html[lang="ja"] .faq-answer p,
html[lang="zh"] .faq-answer p,
html[lang="ja"] .footer-prompt p,
html[lang="zh"] .footer-prompt p,
html[lang="ja"] .feature-mobile-copy p,
html[lang="zh"] .feature-mobile-copy p,
html[lang="ja"] .secondary-page .value-card p,
html[lang="zh"] .secondary-page .value-card p,
html[lang="ja"] .secondary-page .row-value,
html[lang="zh"] .secondary-page .row-value,
html[lang="ja"] .secondary-page .secondary-list li,
html[lang="zh"] .secondary-page .secondary-list li,
html[lang="ja"] .secondary-page .row-card--single p,
html[lang="zh"] .secondary-page .row-card--single p,
html[lang="ja"] .secondary-page .update-links,
html[lang="zh"] .secondary-page .update-links,
html[lang="ja"] .secondary-page .role-mission,
html[lang="zh"] .secondary-page .role-mission,
html[lang="ja"] .secondary-page .role-field,
html[lang="zh"] .secondary-page .role-field,
html[lang="ja"] .secondary-page .contact-card p,
html[lang="zh"] .secondary-page .contact-card p,
html[lang="ja"] .secondary-page .support-tagline,
html[lang="zh"] .secondary-page .support-tagline,
html[lang="ja"] .secondary-page .longform,
html[lang="zh"] .secondary-page .longform {
  line-height: var(--cjk-lh-body);
  letter-spacing: var(--cjk-ls-body);
  text-wrap: pretty;
  line-break: strict;
}

html[lang="ja"] .faq-question span,
html[lang="zh"] .faq-question span {
  line-height: 1.5;
  letter-spacing: var(--cjk-ls-body);
  line-break: strict;
}

html[lang="ja"] .card-grid h3,
html[lang="zh"] .card-grid h3,
html[lang="ja"] .scroll-section h3,
html[lang="zh"] .scroll-section h3,
html[lang="ja"] .feature-menu h3,
html[lang="zh"] .feature-menu h3,
html[lang="ja"] .secondary-page .value-card h2,
html[lang="zh"] .secondary-page .value-card h2,
html[lang="ja"] .secondary-page .value-card h3,
html[lang="zh"] .secondary-page .value-card h3,
html[lang="ja"] .secondary-page .role-card > h2,
html[lang="zh"] .secondary-page .role-card > h2,
html[lang="ja"] .secondary-page .support-title-row strong,
html[lang="zh"] .secondary-page .support-title-row strong,
html[lang="ja"] .secondary-page .longform-section h2,
html[lang="zh"] .secondary-page .longform-section h2 {
  line-height: 1.2;
  letter-spacing: var(--cjk-ls-body);
}

/* Single-line UI */
html[lang="ja"] .nav-item-visual,
html[lang="zh"] .nav-item-visual,
html[lang="ja"] .nav-lang,
html[lang="zh"] .nav-lang,
html[lang="ja"] .btn,
html[lang="zh"] .btn,
html[lang="ja"] .brand-btn,
html[lang="zh"] .brand-btn,
html[lang="ja"] .footer-contact-button,
html[lang="zh"] .footer-contact-button,
html[lang="ja"] .footer-col a,
html[lang="zh"] .footer-col a,
html[lang="ja"] .secondary-page .footer-legal a,
html[lang="zh"] .secondary-page .footer-legal a,
html[lang="ja"] .tab-list button,
html[lang="zh"] .tab-list button,
html[lang="ja"] .type-label,
html[lang="zh"] .type-label,
html[lang="ja"] .type-ui,
html[lang="zh"] .type-ui,
html[lang="ja"] .brand-chips > *,
html[lang="zh"] .brand-chips > *,
html[lang="ja"] .banner-chips > *,
html[lang="zh"] .banner-chips > *,
html[lang="ja"] .secondary-page .row-label,
html[lang="zh"] .secondary-page .row-label,
html[lang="ja"] .secondary-page .role-field h4,
html[lang="zh"] .secondary-page .role-field h4,
html[lang="ja"] .secondary-page .contact-card-link,
html[lang="zh"] .secondary-page .contact-card-link,
html[lang="ja"] .secondary-page .chip-row--light > *,
html[lang="zh"] .secondary-page .chip-row--light > *,
html[lang="ja"] .secondary-page .support-status,
html[lang="zh"] .secondary-page .support-status {
  line-height: var(--cjk-lh-ui);
  letter-spacing: var(--cjk-ls-body);
}