/* Binly language switcher: globe button in the header, compact menu, first-visit hint. Self-contained, so it works on every page whatever its own CSS. */
.lang-sw{position:relative;display:inline-flex;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:10px;border:1px solid var(--line,#e6e3dc);background:rgba(255,255,255,.82);color:var(--muted,#5c5c5c);cursor:pointer;font:inherit;line-height:1;transition:color 200ms ease,border-color 200ms ease,background 200ms ease,box-shadow 200ms ease}
.lang-btn svg{width:20px;height:20px;display:block}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{color:var(--green,#0b8f63);border-color:var(--green,#0b8f63);background:#fff}
.lang-btn:focus-visible{outline:2px solid var(--green,#0b8f63);outline-offset:2px}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:400;min-width:198px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line,#e6e3dc);border-radius:14px;box-shadow:0 18px 48px rgba(20,20,20,.14),0 2px 8px rgba(20,20,20,.05)}
.lang-menu[hidden]{display:none}
.lang-menu li{margin:0;padding:0}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:9px;font-family:inherit;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink,#1b1b1b);text-decoration:none;white-space:nowrap}
.lang-menu a::after{content:'';width:12px;height:12px;flex-shrink:0;opacity:0}
.lang-menu a[aria-current="true"]{font-weight:700;color:var(--green-hover,#096d4c)}
.lang-menu a[aria-current="true"]::after{opacity:1;background:no-repeat center/12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.5' stroke='%230b8f63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lang-menu a:hover,.lang-menu a:focus-visible{background:#e7f4ee;color:var(--green-hover,#096d4c);outline:none}

.lang-hint{position:fixed;left:18px;bottom:18px;z-index:350;display:flex;align-items:center;gap:6px;max-width:min(420px,calc(100vw - 36px));padding:6px 6px 6px 16px;background:#fff;border:1px solid var(--line,#e6e3dc);border-radius:14px;box-shadow:0 18px 48px rgba(20,20,20,.16);font-family:'Manrope',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14.5px;line-height:1.4;color:var(--ink,#1b1b1b)}
.lang-hint a{color:var(--green,#0b8f63);font-weight:700;text-decoration:underline;text-decoration-color:rgba(11,143,99,.4);text-underline-offset:3px}
.lang-hint a:hover{color:var(--green-hover,#096d4c)}
.lang-hint button{flex-shrink:0;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#6b6b6b;font-size:20px;line-height:1;cursor:pointer}
.lang-hint button:hover{background:#f2efe9;color:var(--ink,#1b1b1b)}
.lang-hint button:focus-visible,.lang-hint a:focus-visible{outline:2px solid var(--green,#0b8f63);outline-offset:2px}

@media (max-width:640px){
  .header-actions{gap:8px}
  .header-actions .btn-sm{padding:10px 13px;font-size:14px}
  .lang-btn{width:36px;height:36px}
  .lang-menu{position:fixed;right:12px;top:72px}
  .lang-hint{left:12px;right:12px;bottom:76px;max-width:none}
}
@media (prefers-reduced-motion:reduce){.lang-btn{transition:none}}

/* Japanese pages: system CJK fonts behind the site fonts, phrase-aware line breaks, no negative tracking */
html[lang="ja"]{--display:'Plus Jakarta Sans','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',sans-serif;--body:Manrope,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',sans-serif}
html[lang="ja"] body{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] summary{letter-spacing:0;word-break:auto-phrase}
html[lang="ja"] .kicker,html[lang="ja"] .eyebrow{letter-spacing:.04em;text-transform:none}

/* The globe takes room in the header: drop the in-page nav a little earlier so the install button never gets pushed off screen */
@media (max-width:1040px){.header-nav{display:none}}
@media (max-width:1240px){
  html:lang(de) .header-nav,html:lang(es) .header-nav,html:lang(fr) .header-nav,html:lang(pt) .header-nav,html:lang(it) .header-nav{display:none}
}