/* 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.

   text-transform goes off for the same reason, plus a concrete one: these
   labels are uppercased in the English design, and kana/kanji ignore that —
   but the Latin inside a Japanese label does not. "ほけんBudd-Eの仕組み"
   renders as "ほけんBUDD-Eの仕組み", i.e. the product name spelled wrong.
   Nothing else changes: labels that are pure Japanese are unaffected, and
   ones carrying acronyms (CRM) are already written uppercase at the source. */
.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;
  text-transform: none;
}

/* ── 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: 18px; }
.lang-ja .nav-links a { font-size: 15px; }

/* ── Hero (index) — English is 60px ──
   Sized to the headline rather than to the usual ~0.87 ratio (which would be
   52px). The Japanese hero is two full sentences, 24 and 20 characters; above
   50px the first one no longer fits a line, and the wrap lands mid-word, which
   reads as a typo rather than a line break. 50px is the largest size that puts
   one sentence on each line. max-width is the 1280px the hero container itself
   is capped at, so the headline, not the max-width, decides where lines end.

   This is tied to the headline's length: the Aug 15 revision lengthened the
   first sentence from 22 to 24 characters and 52px stopped fitting. Re-measure
   when the hero copy changes. */
.lang-ja .hero { overflow: visible; }
.lang-ja .hero h1 {
  font-size: 50px;
  line-height: 1.3;
  line-break: strict;
  max-width: 1280px;
}
.lang-ja .subheading { max-width: none; }
.lang-ja .body-text { max-width: none; }

/* ── Section h2s — English is 36px ──
   These used to need three rules at 38/37/44px, because the English side set
   section headings at 44, 42 and 50 depending on the page. English now uses one
   size for all of them, so the Japanese side collapses to one rule too.

   .section-header h2 (team) is listed explicitly because it sits in a div, not
   a <section>, so the element selector alone would skip it — leaving the page
   with a 36px section heading under a 38px page title. */
.lang-ja section h2,
.lang-ja .arch-heading,
.lang-ja .intro-budde h2,
.lang-ja .final-cta h2,
.lang-ja .section-header h2 {
  font-size: 32px;
  line-height: 1.3;
}

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

/* ── Final CTA (index) — sized with the other section h2s above ── */
.lang-ja .final-cta h2 { max-width: 1000px; }
.lang-ja .final-cta p { max-width: none; }

/* ── Page headers (privacy, team, traction) ──
   English h1 is 44px; hdr-sm (contact/demo) sets 36px. Both keep the ~0.87
   ratio that makes the two languages read at the same size on screen. */
.lang-ja .page-header h1 { font-size: 38px; line-height: 1.3; }
.lang-ja.hdr-sm .page-header h1 { font-size: 32px; }
.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; }

/* ── Narrow viewports: 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, and
   937px for the home page hero headline. A grid or flex item can never shrink
   below its min-content, so the browser cannot wrap those lines: it lays the
   section out at its full width and the page overflows sideways. Worse, the
   hero is centred, so half of its overflow lands at a negative x where scrolling
   cannot reach it at all.

   The cutoff is 1000px rather than the 768px the rest of the phone styles use.
   That is deliberate: the widest run (the hero at 937px) still does not fit an
   ~940px viewport, and the pages themselves do not switch to their stacked
   layouts until 900–1000px. Anything lower leaves a band — measured at
   769–995px — where keep-all is still on but there is no room for it.

   Above 1000px 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 headline with its
   first characters cut off the left edge of the screen.

   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: 1000px) {
  .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;
  }
}