/* Applied when body has .lang-ja class (set by applyLang() on all pages) */

/* CJK glyphs fill almost their entire em-box (no ascender/descender
   whitespace the way Latin letterforms have), so at an identical font-size
   Japanese headlines read visibly larger/heavier than English. To make the
   two languages look the same size ON SCREEN, large headings get a mild
   ~0.87x reduction. Body copy is left at full English size — that's small
   enough already that shrinking it further makes it genuinely hard to read,
   and the box-size mismatch is far less noticeable at reading sizes. */

.lang-ja {
  font-family: 'Noto Sans JP', 'Figtree', sans-serif;
}

/* Without this, the browser will happily break a line in the middle of a
   katakana loanword (e.g. "ステップ" -> "ステッ" / "プ"), which reads as
   broken text rather than a normal line wrap. keep-all treats those runs
   as unbreakable units. Scoped to headings only: applying this to running
   body text instead prevents the browser from wrapping at all between the
   commas/periods Japanese uses in place of spaces, which overflows the
   viewport on long sentences. overflow-wrap is a safety net in case a
   heading's unbreakable run still doesn't fit its container. */
.lang-ja h1,
.lang-ja h2,
.lang-ja h3,
.lang-ja h4,
.lang-ja .bio-role,
.lang-ja .team-role,
.lang-ja .card-name,
.lang-ja .card-tagline {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Uppercase-tracking letter-spacing is a Latin convention (visually shows
   letter case/tracking); on kanji/kana it just reads as broken spacing. */
.lang-ja .eyebrow,
.lang-ja .section-eyebrow,
.lang-ja .info-block h3,
.lang-ja .step-label,
.lang-ja .card-badge,
.lang-ja .form-group label,
.lang-ja .logo-carousel-placeholder {
  letter-spacing: 0;
}

/* ── Nav ──
   The seven Japanese labels run ~140px wider than the English ones
   (導入をご検討の方へ alone is 122px against "Who We Serve"'s 88px), which
   pushed the nav row past the width it fits on and made it wrap mid-label.
   Tightening the gap and dropping a single point of font-size brings the
   Japanese row back to the same intrinsic width as the English one, so both
   languages stay on one line down to the same viewport width. */
.lang-ja .nav-links { gap: 24px; }
.lang-ja .nav-links a { font-size: 13px; }

/* ── Hero (index) — English is 72px ── */
.lang-ja .hero { overflow: visible; }
.lang-ja .hero h1 {
  font-size: 63px;
  line-height: 1.3;
  line-break: strict;
  max-width: 1180px;
}
.lang-ja .subheading { max-width: none; }
.lang-ja .body-text { max-width: none; }

/* ── Section h2s (index, traction, product-story, how-it-works) — English is 44px ── */
.lang-ja section h2,
.lang-ja .arch-heading {
  font-size: 38px;
  line-height: 1.3;
}
.lang-ja .intro-budde h2 { /* English is 42px */
  font-size: 37px;
  line-height: 1.3;
}

/* ── Unconstrain intro text widths (index) ── */
.lang-ja .why-now .intro,
.lang-ja .arch-intro {
  max-width: none;
}

/* ── Final CTA (index) — English is 50px ── */
.lang-ja .final-cta h2 { font-size: 44px; line-height: 1.3; max-width: 1000px; }
.lang-ja .final-cta p { max-width: none; }

/* ── Page headers (who-we-serve, team, contact, demo, etc.) ──
   English h1 is 48px on most pages but 42px on contact/demo (which carry
   the extra "hdr-sm" body class) — both get the same ~0.87 ratio. */
.lang-ja .page-header h1 { font-size: 42px; line-height: 1.3; }
.lang-ja.hdr-sm .page-header h1 { font-size: 37px; }
.lang-ja .page-header p { max-width: none; }

/* ── Who We Serve card bodies ── */
.lang-ja .card-body { line-break: strict; }

/* ── Team bios ── */
.lang-ja .team-bio { line-break: strict; }

/* ── Dark card body text (Why Now, Governance etc.) ── */
.lang-ja .dark-card p { line-break: strict; }

/* ── Why Now: match English card sizing exactly, just fix word wrap ── */
.lang-ja .three-cards .dark-card p { word-break: keep-all; }

/* ── Workflow: 2-column so step cards are wider in Japanese ── */
.lang-ja .workflow-steps { grid-template-columns: 1fr 1fr; }

/* ── Workflow step cards ── */
.lang-ja .step-card p { line-break: strict; }

/* ── Phones: keep-all has to come back off ──
   keep-all makes a run of Japanese unbreakable, which also makes the element's
   min-content width the width of that whole run — 528px for the Why Now h2, for
   instance. A grid or flex item can never shrink below its min-content, so on a
   390px phone the browser cannot wrap the line: it lays the section out at 528px
   and the whole page scrolls sideways. (Measured on product-story: 158px of
   horizontal overflow, all of it from these rules.)

   Above the phone breakpoint there is room for the longest run, so keep-all does
   its job and stays on. Below it, ordinary Japanese wrapping is the right
   trade-off — a katakana word occasionally splitting reads far better than a
   page that scrolls horizontally. The 768px cutoff matches mobile.css.

   Only word-break is reset; the overflow-wrap/line-break rules above stay, and
   the workflow 2-column override is separately reset to 1 column by mobile.css. */
@media (max-width: 768px) {
  .lang-ja h1,
  .lang-ja h2,
  .lang-ja h3,
  .lang-ja h4,
  .lang-ja .bio-role,
  .lang-ja .team-role,
  .lang-ja .card-name,
  .lang-ja .card-tagline,
  .lang-ja .three-cards .dark-card p {
    word-break: normal;
  }
}