/* Language menu and Japanese text (1 Nov 2026, the Project Director's 6b and 1a): the same compact three-language button as
   gravitatech.com (rules copied from its site.css, c08aa63), and the Japanese font and line-breaking rules of its ja.css. */
.lang-menu{position:relative;flex:0 0 auto}
.nav button.lang{gap:6px;background:none;color:var(--text);font-family:inherit;cursor:pointer}
.lang svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang .i-chev{width:16px;height:16px;transition:transform .2s}
.lang[aria-expanded="true"] .i-chev{transform:rotate(180deg)}
.nav .lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:flex;flex-direction:column;gap:2px;min-width:200px;padding:6px;margin:0;list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(12,24,68,.14)}
.nav .lang-list[hidden]{display:none}
.site-header .nav .lang-menu ul.lang-list{gap:2px}/* the header's own menu gap (theme.css) is for the page links, not this list */
.nav .lang-list a{display:block;padding:10px 12px;border:0;border-radius:8px;font-weight:400;white-space:nowrap}
.nav .lang-list a:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.nav .lang-list a[aria-current="true"]{font-weight:700;background:color-mix(in srgb,var(--text) 9%,transparent)}
@media (max-width:960px){
  .lang-menu{align-self:flex-start}
  .nav .lang-list{position:static;margin-top:8px;box-shadow:none}
  .nav .lang-list a{padding:12px}
}

/* header from 961 to 1099 px: the Japanese menu is wider, so the language button shows the globe only (its name stays in the label) */
@media (min-width:961px) and (max-width:1099px){
  html:lang(ja) .lang-menu .lang span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html:lang(ja) .nav button.lang{padding-inline:10px}
}

/* phones: アプリケーションデモ is longer than "Application Demo", so the title may take two lines beside the WhatsApp button */
html:lang(ja) .demo-band h1{min-width:0;flex:1 1 auto;word-break:keep-all}/* breaks only at the <wbr> between アプリケーション and デモ */
@media (max-width:600px){html:lang(ja) .demo-band .wrap{flex-wrap:wrap;row-gap:12px}}/* phones: the button goes under the title, which stays on one line */

/* Japanese page: Latin letters keep Carlito, Japanese characters use the system's Japanese fonts (Japanese-first stack) */
:root:lang(ja){--font:"Carlito","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
html:lang(ja) body{line-height:1.8;line-break:strict;text-autospace:normal;word-break:auto-phrase}
html:lang(ja) :is(h1,h2,h3,h4,.btn,button,nav a){word-break:auto-phrase;line-height:1.45}
html:lang(ja) :is(em,i,cite){font-style:normal}
html:lang(ja) :is(h1,h2,h3,h4){text-wrap:balance}
html:lang(ja) :is(p,li,dd,dt,figcaption,a,b,strong,span){text-wrap:pretty}
html:lang(ja) [lang="en"],html:lang(ja) [lang="id"]{line-break:auto;word-break:normal}