/* 中／英切換鈕：沿用頁面既有的 --navy / --line / --font-display，貼著 header CTA 擺 */
.lang-toggle {
  min-height: 44px;
  padding: 0 14px;
  margin-right: 10px;
  border: 1.5px solid var(--line, #e2e6f0);
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--navy, #13204a);
  font: 600 14px/1 var(--font-display, "Poppins", "Noto Sans TC", sans-serif);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.lang-toggle:hover { border-color: var(--purple, #905ddb); background: var(--purple-2, #eee6fb); }
.lang-toggle:focus-visible { outline: 2px solid var(--purple, #905ddb); outline-offset: 2px; }
/* 手機選單裡的那顆：撐滿寬、排在 CTA 下面 */
.lang-toggle-mobile { display: block; width: 100%; margin: 12px 0 0; min-height: 48px; }
/* 手機：header 的那顆縮小、貼在漢堡鈕左邊（header CTA 在手機本來就隱藏） */
@media (max-width: 900px) {
  .header-row > .lang-toggle { min-height: 40px; padding: 0 12px; margin-right: 8px; font-size: 13px; }
}
/* 原站 bug：.mobile-nav a 的字色（navy）蓋過 .btn-navy 的白字，手機選單 CTA 變成深藍字在深藍底上 */
.mobile-nav a.btn-navy, .mobile-nav a.btn-navy svg { color: #fff; }
/* 英文版桌機首屏：英文標題比中文長很多（5 行 vs 2 行），左欄變高會把右上三格拉長、留一大片空白。
   縮小英文標題到約 3 行，並讓多出的高度給下方 Live Demo，三格維持原本高度。中文版不受影響。 */
@media (min-width: 1024px) {
  html[lang="en"] .h-main h1 { font-size: clamp(34px, 2vw + 18px, 46px); line-height: 1.1; }
  html[lang="en"] .h-demo { align-content: center; }
  html[lang="en"] .hero-mosaic { grid-template-rows: auto 1fr auto; }
}
/* 原站標題用 overflow-wrap:anywhere（給中文用），英文長字會被切成「Presentation s」；英文改成整字換行、必要時加連字號 */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { overflow-wrap: break-word; hyphens: auto; }