:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1d1d1f;
  --text-soft: #5f6368;
  --text-faint: #86868b;
  --line: #e5e5e7;
  --accent: #4b56c0;
  --pill: #f1f1f4;
  --page: 760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(calc(100% - 40px), var(--page));
  min-height: 64px;
  margin: 0 auto;
}

/* Two links, not one: the wordmark goes to the company root, the context label to this
   section's index. */
.brand {
  display: inline-flex;
  align-items: center;
}

.brand-name {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand-context {
  margin-left: 11px;
  padding-left: 11px;
  color: var(--text-faint);
  border-left: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.brand-context:hover { color: var(--text-soft); }

.nav-links {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text); }

/* Language switcher. With two languages the control is a toggle, not a menu: it always
   shows the language you are *not* reading, so switching is one click and the label is
   always in the language it will take you to. Add a third language and this has to become
   a menu — do not stack toggles. */
/* Language menu. The markup is built by build.mjs from the NAMES table, so adding a
   language is one entry there and no HTML edit. The items are <a> pointing at the other
   languages' URLs; because .nav-links a outranks a single class, everything it would take
   is restored by .nav-links .lang-menu__item further down. */
/* display:flex, not the default block: an inline-flex button inside a block sits on that
   block's text baseline, and the inherited 17px/1.65 strut then pushes it ~1.5px below the
   nav links beside it. As a flex container the strut is gone and the label's baseline
   matches Privacy / Support exactly. */
.lang-menu {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: -8px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.lang-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--text-soft);
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.lang-menu__btn:hover,
.lang-menu.is-open .lang-menu__btn { color: var(--text); }

.lang-menu__chev { width: 11px; height: 11px; flex: 0 0 auto; opacity: 0.75; }

/* Every name is rendered stacked in one cell, all but the current one hidden, so the
   button is always as wide as the longest language name. Without this the divider on the
   left jumps sideways on each switch, and it would drift again with every new language. */
.lang-menu__label { display: inline-grid; }
.lang-menu__label > * { grid-area: 1 / 1; text-align: left; }
.lang-menu__ghost { visibility: hidden; }

.lang-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  min-width: 148px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.10);
  display: none;
}

.lang-menu.is-open .lang-menu__list { display: block; }

.lang-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 7px 9px;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.lang-menu__item:hover { background: var(--pill); }

/* The items are <a> in the prerendered build (one URL per language, so a crawler can
   follow them), and .lang-menu sits inside .nav-links, whose `a` selector (0,1,1) outranks
   a single class and would take display, color and font-weight. Restore them here rather
   than moving the switcher out of .nav-links, which would disturb the nav's own layout.
   Keep this rule beside the one above: they have to be read together. */
.nav-links .lang-menu__item {
  position: static;
  display: flex;
  color: var(--text);
  font-weight: 400;
}

.lang-menu__check {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--accent);
  visibility: hidden;
}

.lang-menu__item.is-active .lang-menu__check { visibility: visible; }

/* [data-lang-block] is toggled with the hidden property; !important so a block that is
   display:flex or display:block by its own rule still collapses. */
[hidden] { display: none !important; }

.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--text);
}

.hero {
  width: min(calc(100% - 40px), var(--page));
  margin: 0 auto;
  padding: 56px 0 28px;
}

h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(38px, 6vw, 46px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-copy {
  max-width: 660px;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.65;
}

.layout {
  display: block;
  width: min(calc(100% - 40px), var(--page));
  margin: 0 auto 80px;
}

.content-card {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.updated {
  display: inline-block;
  margin: 0 0 4px;
  color: var(--text-faint);
  font-size: 13px;
}

.content-card h2 {
  margin: 38px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.content-card h2:first-of-type {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
}

.content-card h3 {
  margin: 26px 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.content-card p {
  margin: 12px 0 0;
  color: var(--text-soft);
}

.content-card ul,
.content-card ol {
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--text-soft);
}

.content-card li {
  margin: 7px 0;
  padding-left: 3px;
}

/* App directory (/apps) */

.app-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

/* The card is a plain container, not a link: only the domain line navigates. A whole-card
   hit target means a click landing anywhere while reading takes the reader off the page. */
.app-card {
  display: flex;
  align-items: flex-start;
  /* Every icon carries ~9.8% transparent bleed (see .app-icon), so the gap that reads on
     screen is about 9px wider than the number here. */
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

/* Finished macOS app icons, drawn as-is: they carry their own shape and shadow, so nothing
   is clipped or elevated here.
   All four are extracted from their app bundle's .icns, which is what makes the negative
   margins below safe: that pipeline always leaves the same transparent bleed around the
   squircle (9.77% at the top and sides), so one set of numbers aligns every card. Icons
   pulled from the product websites are full-bleed instead — mixing the two sources is what
   made three of these four sit too high. Re-export from the .icns, do not patch the CSS.
   The margins cancel the bleed so the icon's *visible* top edge lands on the title's text
   top and its visible left edge lines up with the card's padding. */
.app-icon {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  margin: -8px 0 -9px -9px;
}

.app-body { min-width: 0; }

.app-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  /* Pinned so the icon's negative top margin can be reasoned about: the icon's visible edge
     is aligned to the cap height of this line, not to its line box. */
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.app-tagline {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 500;
}

.app-desc {
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.55;
}

.app-site {
  display: inline-block;
  margin: 11px 0 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.app-site:hover { text-decoration: underline; }

.site-footer {
  padding: 32px 20px 44px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--text-faint);
  font-size: 13px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
}

.footer-links a {
  color: var(--text-soft);
  font-size: 13px;
  text-decoration: none;
}

@media (max-width: 560px) {
  .nav,
  .hero,
  .layout { width: min(calc(100% - 32px), var(--page)); }
  .hero { padding: 42px 0 24px; }
  .content-card { padding-top: 22px; }
  .nav-links { gap: 18px; }
  .brand-context { display: none; }
  .lang-menu { margin-left: -4px; padding-left: 14px; }
  .app-card { gap: 12px; padding: 18px; }
  .app-icon { width: 72px; height: 72px; margin: -6px 0 -7px -7px; }
  .app-name { font-size: 18px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --text: #f2f2f3;
    --text-soft: #b1b3b8;
    --text-faint: #85878d;
    --line: #2c2d31;
    --accent: #aab0ff;
    --pill: #26272c;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  :root { color-scheme: light; }
  .site-header,
  .site-footer,
  .skip-link { display: none; }
  body { color: #000; background: #fff; }
  .hero,
  .layout { width: 100%; }
  .hero { padding: 20px 0; }
  a { color: #000; }
}