/* comofficekit.com only: loaded by the pages _authoring/comofficekit.py builds,
   on top of styles.css. lynxoffice.com never loads it.

   The ComOfficeKit mark is not designed yet (open decision 1 in the spec,
   docs/roadmap/comofficekit-site.md in the LynxOffice repository), so the brand
   is a text wordmark: the name, then "by KDAN". It takes its colour from where
   it sits, white in the navy hero and graphite in the footer. */

.brand--word { gap: 10px; color: inherit; }
.brand__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand__by {
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  line-height: 1;
}

/* The platforms still in development: one "tell me when it ships" mail link each. */
.notify { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; padding: 0; list-style: none; }
.notify a { font-weight: 600; }

/* "What the engine does" against "what LynxOffice adds": two plain lists. */
.split-list { margin: 10px 0 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--muted); }

/* The home page's evaluation links sit in the hero's meta line, on navy, where the
   page's link colour measures 3.3:1; they take the mint of the hero's primary button,
   11.7:1 there (2026-10-28). */
.hero__meta a { color: var(--lynx-mint); text-underline-offset: 3px; }

/* The header in six languages (2026-10-20): the name, the language globe,
   Contact us and Menu stay on one row at every width from 360px up, measured
   with each language's Contact us (お問い合わせ and Contáctenos are the widest).
   The wordmark is wider than lynxoffice.com's phone mark, so this bar gives way
   sooner than lynxoffice.com's:
   - below 1024px the language menu is the globe alone (the names are in its panel);
   - below 901px the row of links folds into Menu (lynxoffice.com: 761px);
   - on phones "by KDAN" goes (it stays in the footer, beside the copyright line),
     Menu is its icon alone (its word kept for screen readers), and the name and
     the gaps shrink a step at a time. */
@media (max-width: 1023px) {
  .nav__lang-now { display: none; }
  .nav__lang-btn { min-height: 44px; min-width: 44px; justify-content: center; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .nav { gap: 12px; }
  .nav__lang { margin-left: auto; }
  .nav__lang + .btn { margin-left: 0; }
}
/* Spanish and Japanese labels run longest ("Referencia de la API (en inglés)",
   "Preguntas frecuentes"; "APIリファレンス（英語）", since the API reference's links
   say it is in English, 2026-10-20), so their row of links folds into Menu sooner:
   below 1181px for Spanish, which also wrapped at 1024px and 901-960px before
   that, and below 1024px for Japanese. Measured with _authoring/header_fit_test.js.
   No gap is set here: a language selector outranks the phone rules below 401px,
   and once did, keeping Spanish's 12px gap at 360px, where the bar then wrapped. */
@media (max-width: 1180px) {
  html[lang="es"] .nav__links { display: none; }
  html[lang="es"] .nav__menu { display: block; }
  html[lang="es"] .nav__lang { margin-left: auto; }
  html[lang="es"] .nav__lang + .btn { margin-left: 0; }
}
@media (max-width: 1023px) {
  html[lang="ja"] .nav__links { display: none; }
  html[lang="ja"] .nav__menu { display: block; }
  html[lang="ja"] .nav__lang { margin-left: auto; }
  html[lang="ja"] .nav__lang + .btn { margin-left: 0; }
}
@media (max-width: 520px) {
  .nav .brand__by { display: none; }
  .nav .brand__word { font-size: 1rem; }
  .nav__toggle { padding: 0 10px; }
  .nav__toggle span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .nav { gap: 6px; }
  .nav .brand__word { font-size: 0.9375rem; }
  .nav__lang-btn { min-width: 40px; }
  .nav > .btn--sm { padding: 0 12px; }
}
@media (max-width: 380px) {
  .nav .brand__word { font-size: 0.875rem; }
  .nav > .btn--sm { padding: 0 10px; }
}