/* Language toggle, shared by every page. The page ships both languages in
   its markup (data-l="en" / data-l="zh"); <html data-lang> picks one. */
html[data-lang="en"] [data-l="zh"],
html[data-lang="zh"] [data-l="en"] { display: none !important; }

.topbar .nav { display: flex; align-items: center; gap: 20px; }

.lang {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
}
.lang button {
  position: relative; z-index: 1;
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; cursor: pointer;
  min-width: 42px; height: 24px; padding: 0 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; line-height: 24px;
  color: var(--muted);
  border-radius: 999px;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang button[lang="zh-Hans"] { font-family: var(--sans-cn); font-size: 12px; letter-spacing: 0.08em; }
.lang button:hover { color: var(--fg); }
.lang button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang button[aria-pressed="true"] { color: var(--accent); }
.lang-pill {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: rgba(168, 72, 46, 0.09);
  transition: transform 0.36s cubic-bezier(.3, .7, .2, 1);
}
html[data-lang="zh"] .lang-pill { transform: translateX(100%); }
html[data-lang][data-lang-next="zh"] .lang-pill { transform: translateX(100%); }
html[data-lang][data-lang-next="en"] .lang-pill { transform: none; }

/* The switch: everything under the top bar breathes out, swaps while it is
   invisible, and breathes back in. */
main.wrap > :not(.topbar) { transition: opacity 0.24s ease, transform 0.24s ease; }
html.lang-out main.wrap > :not(.topbar) { opacity: 0; transform: translateY(6px); }

/* Once the intro has played, showing a hidden language must not replay it. */
html.settled .reveal { animation: none; opacity: 1; transform: none; }

/* Chinese typography: no negative tracking, more air between lines. */
html[data-lang="zh"] body { line-height: 1.8; }
html[data-lang="zh"] .headline,
html[data-lang="zh"] .subtitle,
html[data-lang="zh"] .pitch,
html[data-lang="zh"] h1,
html[data-lang="zh"] h2 {
  font-family: var(--serif-cn, 'Noto Serif SC', 'Songti SC', serif);
  letter-spacing: 0.01em;
}
html[data-lang="zh"] .headline { line-height: 1.22; max-width: none; }
html[data-lang="zh"] .subtitle,
html[data-lang="zh"] .pitch { line-height: 1.3; }
html[data-lang="zh"] .lede,
html[data-lang="zh"] .work-item p,
html[data-lang="zh"] .consulting p,
html[data-lang="zh"] .pricing p,
html[data-lang="zh"] .support p,
html[data-lang="zh"] ul.features li { line-height: 1.9; }
html[data-lang="zh"] .approach { line-height: 1.8; letter-spacing: 0; }
html[data-lang="zh"] .eyebrow,
html[data-lang="zh"] .section-label,
html[data-lang="zh"] .meta-line,
html[data-lang="zh"] .note,
html[data-lang="zh"] .shot-caption { font-size: 12px; letter-spacing: 0.18em; }

@media (max-width: 400px) {
  .topbar .nav { gap: 12px; }
  .lang button { min-width: 36px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  main.wrap > :not(.topbar), .lang-pill, .lang button { transition: none; }
}

/* Keep the accent phrase whole: a Chinese line may break anywhere. */
html[data-lang="zh"] .headline .accent,
html[data-lang="zh"] .subtitle .accent,
html[data-lang="zh"] .pitch .accent { white-space: nowrap; }