/* Language switcher (English / 繁體中文) and Traditional Chinese typography. Added by _build/zh.py. */

.lang{position:relative; margin-left:14px; flex:0 0 auto;}
.lang summary{list-style:none; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); background:rgba(11,7,32,.45); color:#fff; font:600 13px/1 "Inter", "Noto Sans TC", sans-serif;
  cursor:pointer; user-select:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:border-color .2s ease, background .2s ease;}
.lang summary::-webkit-details-marker{display:none;}
.lang summary:hover, .lang[open] summary{border-color:rgba(127,214,255,.7); background:rgba(46,188,255,.08);}
.lang summary:focus-visible{outline:2px solid #5fd0ff; outline-offset:2px;}
.lang summary svg{width:16px; height:16px;}
.lang__menu{position:absolute; right:0; top:calc(100% + 8px); min-width:150px; padding:6px; border-radius:14px; z-index:70;
  background:rgba(13,8,38,.97); border:1px solid rgba(226,188,255,.18); box-shadow:0 18px 50px rgba(0,0,0,.5);}
.lang__menu a{display:block; padding:10px 12px; border-radius:9px; font:500 14px/1.2 "Inter", "Noto Sans TC", sans-serif; color:rgba(255,255,255,.85);}
.lang__menu a:hover{background:rgba(255,255,255,.07); color:#fff;}
.lang__menu a[aria-current]{color:#fff; background:rgba(176,56,240,.25);}
.lang__menu a[aria-current]::after{content:" ✓"; color:#5fd0ff;}

.mnav__lang{display:flex; gap:8px; margin:22px 0 4px;}
.mnav__lang a{flex:1; text-align:center; padding:12px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.22);
  font:600 15px/1.2 "Inter", "Noto Sans TC", sans-serif; color:rgba(255,255,255,.85);}
.mnav__lang a[aria-current]{border-color:#b038f0; background:rgba(176,56,240,.22); color:#fff;}

@media (max-width:1024px){
  .lang{margin-left:auto;}
  .lang + .hdr__burger{margin-left:6px;}
}
@media (max-width:640px){
  .lang summary{height:38px; padding:0 11px;}
}

/* Traditional Chinese pages */
html[lang="zh-Hant-TW"]{--display:"Inter Tight", "Noto Sans TC", "Inter", system-ui, sans-serif;}
html[lang="zh-Hant-TW"] body{font-family:"Inter", "Noto Sans TC", system-ui, sans-serif;}
html[lang="zh-Hant-TW"] h1, html[lang="zh-Hant-TW"] h2, html[lang="zh-Hant-TW"] h3, html[lang="zh-Hant-TW"] h4{letter-spacing:0; line-height:1.18;}
html[lang="zh-Hant-TW"] p, html[lang="zh-Hant-TW"] li{line-height:1.75;}
html[lang="zh-Hant-TW"] .eyebrow{letter-spacing:.12em;}
html[lang="zh-Hant-TW"] em{font-style:normal;}
/* English headings are capped at ~14ch; Chinese characters are 1em wide, so give them room */
html[lang="zh-Hant-TW"] h1{max-width:13em;}
html[lang="zh-Hant-TW"] .phero h1{max-width:12em;}
html[lang="zh-Hant-TW"] .sec__head h2, html[lang="zh-Hant-TW"] .cta h2{max-width:16em;}
/* Chinese line breaks: assets/zh-wrap.js marks word boundaries in headings, buttons and short labels and adds
   .zh-words, which then break only between words (學習|空間, never 學習空|間); if something still cannot fit
   it may break anywhere rather than spill out. Headings get balanced lines; all other text avoids a lone
   character on its last line. */
html[lang="zh-Hant-TW"] .zh-words{word-break:keep-all; overflow-wrap:anywhere;}
html[lang="zh-Hant-TW"] :is(h1, h2, h3, h4){text-wrap:balance;}
html[lang="zh-Hant-TW"] body{text-wrap:pretty;}
/* Pricing in NT$ (zh/prices-twd.json): ranges are longer than the US ones, so let them break after the dash */
html[lang="zh-Hant-TW"] .tier__price, html[lang="zh-Hant-TW"] .amt, html[lang="zh-Hant-TW"] label em{white-space:normal;}
/* Tier prices: keep each NT$ range on one line, sized to the card (container query); older browsers keep the wrap above */
@supports (container-type:inline-size){
  html[lang="zh-Hant-TW"] .tier__top{container-type:inline-size;}
  html[lang="zh-Hant-TW"] .tier__price{white-space:nowrap; font-size:min(36px, 100cqi / 13);}
}