/*
 * Zx website chrome.
 *
 * The marketing surfaces follow the ZeyOS visual language (www.zeyos.com): Inter, deep slate-to-
 * black bands, the ZeyOS green as the single accent, heavy tightly-tracked headings, uppercase
 * eyebrow labels, and translucent cards. The documentation application uses
 * the themeable `--zx-*` component tokens instead so they follow the light/dark switch.
 *
 * Site-only colours live in the `--site-*` namespace below and are deliberately fixed: the
 * marketing bands are always dark, exactly like zeyos.com.
 */

/* Inter, self-hosted (SIL Open Font License, assets/fonts/inter/OFL.txt): the variable Latin and
   Latin Extended subsets, so every weight from 100 to 900 renders as designed rather than as the
   nearest installed weight, and no font request leaves this site. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --site-content-width: 1200px;
  --site-night: #0f172a;
  --site-night-deep: #080e1a;
  --site-black: #05070c;
  --site-brand: #21cc75;
  --site-brand-strong: #16a75d;
  --site-mist: #e2e8f0;
  --site-header-height: 64px;
}

html {
  scroll-padding-block-start: calc(var(--site-header-height) + var(--zx-space-4));
}

body.site-page {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

body.site-page:has(.site-header--overlay) {
  background: var(--site-night);
}

body.site-page > main {
  flex: 1 0 auto;
}

/* ---------------------------------------------------------------- header -- */

/*
 * On the documentation, the gallery, and the theme studio the header is application chrome: an
 * opaque surface with the subtle divider under it, quiet ghost controls, and a neutral current
 * page — the same language as the shell header of the layouts. It is a little shorter there than
 * on the landing page, where it floats over the hero.
 */
.site-page--app,
.site-page--studio {
  --site-header-height: 56px;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  border-block-end: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-surface);
}

/* Home page: the header starts as chrome-free content over the hero. Once the page moves, it
   adopts the same glass material as persistent application chrome. */
.site-header--overlay {
  position: fixed;
  inset-inline: 0;
  border-block-end-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: #fff;
}

.site-header--overlay[data-scrolled] {
  border-block-end-color: rgb(255 255 255 / 10%);
  background: color-mix(in srgb, var(--site-night) 76%, transparent);
  -webkit-backdrop-filter: var(--zx-glass-filter-chrome);
  backdrop-filter: var(--zx-glass-filter-chrome);
  box-shadow: var(--zx-glass-chrome-shadow);
}

@media (prefers-reduced-motion: no-preference) {
  .site-header--overlay {
    transition:
      background-color var(--zx-dur-base) var(--zx-ease),
      border-color var(--zx-dur-base) var(--zx-ease),
      box-shadow var(--zx-dur-base) var(--zx-ease),
      backdrop-filter var(--zx-dur-base) var(--zx-ease);
  }
}

.site-header__inner,
.site-section,
.site-footer__inner {
  inline-size: min(100% - (2 * var(--zx-space-6)), var(--site-content-width));
  margin-inline: auto;
}

.site-header__inner {
  position: relative;
  display: flex;
  min-block-size: var(--site-header-height);
  align-items: center;
  gap: var(--zx-space-6);
}

.site-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: var(--zx-radius-md);
}

.site-brand img {
  display: block;
  block-size: 30px;
  inline-size: auto;
}

.site-page--app .site-brand img,
.site-page--studio .site-brand img {
  block-size: 28px;
}

.brand-logo--dark {
  display: none !important;
}

[data-zx-theme="dark"] .brand-logo--light,
.site-header--overlay .brand-logo--light {
  display: none !important;
}

[data-zx-theme="dark"] .brand-logo--dark,
.site-header--overlay .brand-logo--dark {
  display: block !important;
}

/* "Auto" follows the system, so the wordmark does too. */
@media (prefers-color-scheme: dark) {
  [data-zx-theme="auto"] .brand-logo--light {
    display: none !important;
  }

  [data-zx-theme="auto"] .brand-logo--dark {
    display: block !important;
  }
}

/* Current version, next to the wordmark, linking to the newest release. `/releases/latest`
   rather than a stamped tag, so the link can never go stale against the deployed site. A quiet
   tag: a neutral fill, the muted colour, a small corner. */
.site-version {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-start: calc(-1 * var(--zx-space-3));
  padding: 0 var(--zx-space-2);
  border-radius: var(--zx-radius-md);
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
  font-weight: var(--zx-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.8;
  text-decoration: none;
  white-space: nowrap;
}

.site-version:hover {
  background: var(--zx-color-bg-current);
  color: var(--zx-color-text);
}

.site-version:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

/* The overlay header sits on the dark hero band in either theme, so it needs its own ink. */
.site-header--overlay .site-version {
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 72%);
}

.site-header--overlay .site-version:hover {
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

.site-nav {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--zx-control-height);
  padding-inline: var(--zx-space-3);
  border-radius: var(--zx-radius-md);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text);
}

/* The page you are on is where you are: the neutral current fill, the text colour, a heavier
   label — never the accent. */
.site-nav a[aria-current="page"] {
  background: var(--zx-color-bg-current);
  color: var(--zx-color-text);
  font-weight: var(--zx-weight-semibold);
}

.site-nav a:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

.site-header--overlay .site-nav a {
  color: rgb(255 255 255 / 72%);
}

.site-header--overlay .site-nav a:hover,
.site-header--overlay .site-nav a[aria-current="page"] {
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

/* The documentation search stays on the physical centre line even though the brand and actions
   have different widths. Below tablet width it becomes a centred second row. */
.site-docs-search {
  position: absolute;
  inset-inline-start: 50%;
  inline-size: min(19rem, 24vw);
  transform: translateX(-50%);
}

.site-docs-search .zx-search,
.site-docs-search .zx-search__input {
  inline-size: 100%;
  min-inline-size: 0;
}

/* Square, label-free chrome buttons, drawn like the library's ghost icon button: no frame until
   pointed at. The glyph is an SVG mask filled with currentColor, so it follows the theme and the
   overlay header without a second asset. */
.site-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-1);
}

.site-icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: calc(var(--zx-control-height) + 2px);
  block-size: calc(var(--zx-control-height) + 2px);
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: var(--zx-radius-md);
  background: none;
  color: var(--zx-color-text-muted);
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
  .site-header--overlay[data-scrolled] {
    background: var(--site-night);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

@media (prefers-contrast: more) {
  .site-header:not(.site-header--overlay) {
    border-block-end-color: var(--zx-color-border-strong);
  }
}

@media (forced-colors: active) {
  .site-header--overlay[data-scrolled] {
    border-block-end-color: CanvasText;
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: CanvasText;
  }
}

.site-icon-btn::before {
  content: "";
  inline-size: 16px;
  block-size: 16px;
  background: currentColor;
  mask: var(--site-icon) center / contain no-repeat;
}

.zx-scope .site-icon-btn:hover {
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text);
}

.site-icon-btn:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

.site-icon-btn[data-site-icon="github"] {
  --site-icon: url("assets/github.svg");
}

/* The ZeyOS mark is a wide lockup; widen the glyph box so it is not letterboxed into a square. */
.site-icon-btn[data-site-icon="zeyos"] {
  --site-icon: url("assets/zeyos-mark.svg");
}

.site-icon-btn[data-site-icon="zeyos"]::before {
  inline-size: 22px;
}

/* The theme button shows the theme it switches *to*. */
.site-icon-btn[data-theme-toggle] {
  --site-icon: url("assets/moon.svg");
}

[data-zx-theme="dark"] .site-icon-btn[data-theme-toggle] {
  --site-icon: url("assets/sun.svg");
}

@media (prefers-color-scheme: dark) {
  [data-zx-theme="auto"] .site-icon-btn[data-theme-toggle] {
    --site-icon: url("assets/sun.svg");
  }
}

.site-header--overlay .site-icon-btn {
  color: rgb(255 255 255 / 85%);
}

.zx-scope .site-header--overlay .site-icon-btn:hover {
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

/* -------------------------------------------------------- marketing bands -- */

.site-band {
  position: relative;
  color: #fff;
  background: var(--site-night);
}

.site-band--deep {
  background: var(--site-black);
}

.site-band--gradient {
  background: linear-gradient(180deg,
    var(--site-night) 0%,
    var(--site-night) 45%,
    var(--site-night-deep) 78%,
    var(--site-black) 100%);
}

.site-band--light {
  border-block: 1px solid var(--zx-color-border);
  background: var(--zx-color-bg-surface);
  color: var(--zx-color-text);
}

.site-section {
  padding-block: clamp(var(--zx-space-8), 7vw, 88px);
}

.band-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--zx-space-3);
  margin: 0 0 var(--zx-space-4);
  color: var(--site-brand);
  font-size: var(--zx-text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band-eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  flex: none;
  border-radius: var(--zx-radius-full);
  background: currentColor;
}

.site-band--light .band-eyebrow {
  color: var(--zx-color-accent);
}

.section-heading {
  max-inline-size: 720px;
  margin-block-end: var(--zx-space-7);
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.section-heading p {
  margin: var(--zx-space-4) 0 0;
  color: rgb(226 232 240 / 62%);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65;
}

.site-band--light .section-heading p {
  color: var(--zx-color-text-muted);
}

/* --------------------------------------------------------------- buttons -- */

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zx-space-2);
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--zx-radius-lg);
  font-size: var(--zx-text-lg);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--zx-dur-fast) var(--zx-ease),
    border-color var(--zx-dur-fast) var(--zx-ease),
    transform var(--zx-dur-fast) var(--zx-ease);
}

.site-btn--primary {
  background: var(--site-brand);
  color: #06210f;
}

.site-btn--primary:hover {
  background: var(--site-brand-strong);
}

.site-btn--ghost {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 6%);
  color: rgb(255 255 255 / 88%);
  font-weight: 600;
}

.site-btn--ghost:hover {
  border-color: rgb(255 255 255 / 34%);
  background: rgb(255 255 255 / 12%);
}

.site-btn--sm {
  padding: 8px 16px;
  font-size: var(--zx-text-md);
}

/* Button glyphs are masked SVGs, so they inherit the button's text colour in both themes. */
.site-btn[data-btn-icon]::before {
  content: "";
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
  background: currentColor;
  mask: var(--site-btn-icon) center / contain no-repeat;
}

.site-btn[data-btn-icon="book"] {
  --site-btn-icon: url("assets/book.svg");
}

/* The ZeyOS mark is a wide lockup; give it room rather than letterboxing it into a square. */
.site-btn[data-btn-icon="zeyos"] {
  --site-btn-icon: url("assets/zeyos-mark.svg");
}

.site-btn[data-btn-icon="zeyos"]::before {
  inline-size: 1.7em;
}

.site-btn:active {
  transform: translateY(1px);
}

.site-btn:focus-visible {
  outline: 2px solid var(--site-brand);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ hero -- */

.hero__inner {
  display: grid;
  justify-items: center;
  padding-block: clamp(84px, 13vw, 148px) clamp(64px, 9vw, 104px);
  text-align: center;
}

.hero__logo {
  inline-size: clamp(148px, 22vw, 216px);
  block-size: auto;
  margin-block-end: var(--zx-space-6);
}

.hero__eyebrow {
  justify-content: center;
  font-size: var(--zx-text-lg);
}

.hero__eyebrow::before {
  inline-size: 30px;
  block-size: 18px;
  border-radius: 0;
  background: #fff;
  mask: url("assets/zeyos-mark.svg") center / contain no-repeat;
}

.hero h1 {
  max-inline-size: 24ch;
  margin: 0;
  font-size: clamp(36px, 5.8vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero h1 em {
  color: var(--site-brand);
  font-style: normal;
}

.hero__subhead {
  max-inline-size: 62ch;
  margin: var(--zx-space-6) 0 0;
  color: rgb(226 232 240 / 62%);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zx-space-3);
  margin-block-start: var(--zx-space-7);
}

/* --------------------------------------------------------- system layers -- */

.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  border-inline-start: 1px solid rgb(255 255 255 / 12%);
}

/* Four explicit rows — index, title, body, link — with the body absorbing the slack, so the four
   "Explore …" links line up across the row however long each description runs. */
.system-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-block-size: 280px;
  padding: var(--zx-space-6);
  border-block-end: 1px solid rgb(255 255 255 / 12%);
  border-inline-end: 1px solid rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 2%);
}

.system-card__index {
  color: var(--site-brand);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.system-card h3 {
  margin: 0 0 var(--zx-space-3);
  padding-block-start: var(--zx-space-8);
  font-size: var(--zx-text-xl);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.system-card p {
  margin: 0;
  color: rgb(226 232 240 / 62%);
  line-height: 1.6;
}

.system-card a {
  align-self: end;
  justify-self: start;
  margin-block-start: var(--zx-space-5);
  color: var(--site-brand);
  font-size: var(--zx-text-sm);
  font-weight: 650;
  text-decoration: none;
}

.system-card a::after {
  content: "\2192";
  margin-inline-start: var(--zx-space-2);
}

.system-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.system-card a:focus-visible {
  outline: 2px solid var(--site-brand);
  outline-offset: 3px;
}

/* -------------------------------------------------------------- features -- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zx-space-4);
}

.feature-card {
  padding: var(--zx-space-6);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--zx-radius-xl);
  background: rgb(255 255 255 / 3%);
}

.feature-card__icon {
  display: inline-grid;
  inline-size: 38px;
  block-size: 38px;
  place-items: center;
  border: 1px solid rgb(33 204 117 / 24%);
  border-radius: var(--zx-radius-lg);
  background: rgb(33 204 117 / 12%);
  color: var(--site-brand);
}

.feature-card h3 {
  margin: var(--zx-space-5) 0 var(--zx-space-2);
  font-size: var(--zx-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  color: rgb(226 232 240 / 60%);
  line-height: 1.6;
}

/* -------------------------------------------------------------- showcase -- */

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zx-space-4);
}

.showcase-card {
  display: grid;
  align-content: start;
  min-inline-size: 0;
  gap: var(--zx-space-4);
  padding: var(--zx-space-5);
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-xl);
  background: var(--zx-color-bg-page);
}

.showcase-card[data-wide] {
  grid-column: 1 / -1;
}

.showcase-card h3 {
  margin: 0;
  font-size: var(--zx-text-md);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zx-color-text-muted);
}

.showcase-card output {
  min-block-size: 1.5em;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
}

.showcase-card .zx-table {
  min-inline-size: 0;
}

/* ----------------------------------------------------------- quick start -- */

.quick-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zx-space-4);
}

.code-card {
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--zx-radius-xl);
  background: rgb(255 255 255 / 3%);
}

.code-card h3 {
  margin: 0;
  padding: var(--zx-space-3) var(--zx-space-5);
  border-block-end: 1px solid rgb(255 255 255 / 8%);
  color: rgb(226 232 240 / 70%);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code-card pre {
  margin: 0;
  overflow: auto;
  padding: var(--zx-space-5);
  color: var(--site-mist);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-sm);
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
}

/* ----------------------------------------------------------------- paths -- */

/*
 * The three ways into the library, directly under the hero. A visitor arrives with one of three
 * jobs — start something, look something up, or move an old screen across — and the landing page
 * should answer that before it starts arguing for itself.
 */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zx-space-4);
}

.path-card {
  display: grid;
  align-content: start;
  gap: var(--zx-space-3);
  padding: var(--zx-space-6);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--zx-radius-xl);
  background: rgb(255 255 255 / 4%);
  color: inherit;
  text-decoration: none;
}

.path-card:hover {
  border-color: rgb(33 204 117 / 45%);
  background: rgb(33 204 117 / 8%);
}

.path-card:focus-visible {
  outline: 2px solid var(--site-brand);
  outline-offset: 3px;
}

.path-card__icon {
  display: inline-grid;
  inline-size: 34px;
  block-size: 34px;
  place-items: center;
  border: 1px solid rgb(33 204 117 / 24%);
  border-radius: var(--zx-radius-lg);
  background: rgb(33 204 117 / 12%);
  color: var(--site-brand);
}

.path-card h3 {
  margin: 0;
  font-size: var(--zx-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.path-card p {
  margin: 0;
  color: rgb(226 232 240 / 62%);
  line-height: 1.6;
}

.path-card code {
  font-family: var(--zx-font-mono);
  font-size: 0.92em;
}

.path-card__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--zx-space-2);
  color: var(--site-brand);
  font-size: var(--zx-text-sm);
  font-weight: 600;
}

.path-card__cue::after {
  content: "\2192";
  transition: transform var(--zx-dur-fast) var(--zx-ease);
}

.path-card:hover .path-card__cue::after {
  transform: translateX(3px);
}

/* ----------------------------------------------------------- entry points -- */

.install-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zx-space-2) var(--zx-space-4);
  margin: 0 0 var(--zx-space-5);
  color: rgb(226 232 240 / 62%);
  font-size: var(--zx-text-sm);
}

.install-line > code {
  padding: var(--zx-space-2) var(--zx-space-4);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--zx-radius-lg);
  background: rgb(255 255 255 / 5%);
  color: var(--site-mist);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-md);
}

.install-line code {
  font-family: var(--zx-font-mono);
}

.entry-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--zx-space-2) var(--zx-space-5);
  margin: var(--zx-space-6) 0 var(--zx-space-6);
  font-size: var(--zx-text-sm);
}

.entry-list dt {
  color: var(--site-mist);
  font-family: var(--zx-font-mono);
}

.entry-list dt code,
.entry-list dt a {
  color: inherit;
  font-family: inherit;
}

.entry-list dd {
  margin: 0;
  color: rgb(226 232 240 / 60%);
}

.entry-list dd code {
  font-family: var(--zx-font-mono);
}

.contribute-card {
  padding: var(--zx-space-6);
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-xl);
  background: var(--zx-color-bg-page);
}

.contribute-card h3 {
  margin: 0 0 var(--zx-space-3);
  font-size: var(--zx-text-lg);
  font-weight: 700;
}

.contribute-card p {
  margin: 0;
  color: var(--zx-color-text-muted);
  line-height: 1.65;
}

.contribute-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zx-space-2) var(--zx-space-5);
  margin-block-start: var(--zx-space-5);
}

.contribute-card__links a {
  color: var(--zx-color-accent);
  font-size: var(--zx-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.contribute-card__links a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------- utilities -- */

.site-visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--site-black);
  color: rgb(226 232 240 / 60%);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--zx-space-3) var(--zx-space-5);
  inline-size: auto;
  margin: 0;
  padding: 0;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--zx-space-6) var(--zx-space-7);
  padding-block: var(--zx-space-7);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--zx-space-4);
}

.site-footer__brand img {
  display: block;
  block-size: 26px;
  inline-size: auto;
}

.site-footer__copyright {
  color: rgb(226 232 240 / 68%);
  line-height: 1.5;
}

.site-footer__copyright span {
  color: rgb(226 232 240 / 45%);
}

.site-footer p {
  margin: 0;
  font-size: var(--zx-text-sm);
}

.site-footer a {
  color: inherit;
  font-size: var(--zx-text-sm);
  text-decoration: none;
  border-block-end: 1px solid rgb(255 255 255 / 25%);
}

.site-footer a:hover {
  border-block-end-color: currentColor;
  color: #fff;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zx-space-6) var(--zx-space-8);
}

.site-footer__group {
  display: grid;
  align-content: start;
  gap: var(--zx-space-2);
}

.site-footer__group h2 {
  margin: 0 0 var(--zx-space-1);
  color: rgb(226 232 240 / 88%);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-semibold);
}

.site-footer__group a {
  border-block-end: 0;
}

.site-footer__group a:hover {
  color: #fff;
}

/*
 * The version and build date are the maintenance signal: a documentation site with no idea when
 * it was last built is the one nobody trusts. Both are stamped in by `tools/build-site.js`.
 */
.site-footer__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zx-space-2) var(--zx-space-5);
  inline-size: min(100% - (2 * var(--zx-space-6)), var(--site-content-width));
  margin-inline: auto;
  padding-block: var(--zx-space-4);
  border-block-start: 1px solid rgb(255 255 255 / 8%);
  color: rgb(226 232 240 / 45%);
  font-size: var(--zx-text-xs);
}

/*
 * On the application pages the footer is chrome, not a marketing band: the chrome tone under a
 * subtle divider, muted type, and the ZeyOS mark drawn in the text colour. The mark ships white
 * only, so the light theme darkens it with a filter rather than needing a second asset.
 */
:is(.site-page--app, .site-page--studio) .site-footer {
  border-block-start: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-chrome);
  color: var(--zx-color-text-muted);
}

:is(.site-page--app, .site-page--studio) .site-footer__inner {
  padding-block: var(--zx-space-6);
}

:is(.site-page--app, .site-page--studio) .site-footer__brand img {
  block-size: 22px;
  filter: brightness(0);
  opacity: .78;
}

[data-zx-theme="dark"] :is(.site-page--app, .site-page--studio) .site-footer__brand img {
  filter: none;
  opacity: .82;
}

@media (prefers-color-scheme: dark) {
  [data-zx-theme="auto"] :is(.site-page--app, .site-page--studio) .site-footer__brand img {
    filter: none;
    opacity: .82;
  }
}

:is(.site-page--app, .site-page--studio) .site-footer__copyright {
  color: var(--zx-color-text-muted);
}

:is(.site-page--app, .site-page--studio) .site-footer__copyright span {
  color: var(--zx-color-text-subtle);
}

:is(.site-page--app, .site-page--studio) .site-footer a {
  border-block-end-color: var(--zx-color-border);
}

:is(.site-page--app, .site-page--studio) .site-footer a:hover {
  border-block-end-color: currentColor;
  color: var(--zx-color-text);
}

:is(.site-page--app, .site-page--studio) .site-footer__stamp {
  border-block-start-color: var(--zx-color-border-subtle);
  color: var(--zx-color-text-subtle);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .feature-grid,
  .path-grid,
  .system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * The documentation header carries the centred global search on top of the nav, so it runs out of
 * room well before the marketing header does — the search is absolutely centred on the page line
 * and cannot be pushed aside by a wider nav. Below this width it takes its own centred row
 * instead of overlapping. `tools/run-smoke.js` asserts both: centred at 1440px, no overlap with
 * the brand, version, nav, or actions at 1280px.
 */
@media (max-width: 1400px) {
  /* Keyed off the search itself so this only changes the documentation header. */
  .site-header__inner:has(.site-docs-search) {
    flex-wrap: wrap;
    padding-block: var(--zx-space-2);
  }

  .site-docs-search {
    position: relative;
    order: 4;
    inset-inline-start: auto;
    /* `flex-basis: 100%` gives the field its own line in both shells. It has to stay unclamped:
       a max-inline-size here would shrink the hypothetical main size until the row no longer
       forces a wrap, which left the Theme Studio search inline at the end of the header instead.
       The `inline-size` below is therefore inert (basis wins), so the row runs full width — the
       results popover is anchored to this element with `inset-inline: 0`, so it must. */
    flex: 1 0 100%;
    inline-size: min(100%, 34rem);
    margin-inline: auto;
    transform: none;
  }
}

@media (max-width: 1260px) {
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--zx-space-2);
  }
}

@media (max-width: 780px) {
  /* The compact header gains another navigation row. Keeping it in flow prevents that row from
     covering the hero while its transparent surface still reads as part of the same night band. */
  .site-header--overlay {
    position: sticky;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--zx-space-2);
    padding-block: var(--zx-space-2);
  }

  /* The header's gap shrinks here, so the version tag no longer pulls itself towards the mark. */
  .site-version {
    margin-inline-start: 0;
  }

  .site-nav {
    order: 3;
    inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav a {
    padding-inline: var(--zx-space-2);
  }

  .site-actions {
    margin-inline-start: auto;
  }

  .theme-toggle {
    margin-inline-start: auto;
  }

  .feature-grid,
  .path-grid,
  .system-grid,
  .showcase-grid,
  .quick-start-grid {
    grid-template-columns: 1fr;
  }

  .entry-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .entry-list dd {
    margin-block-end: var(--zx-space-3);
  }

  .showcase-card[data-wide] {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .site-header__inner,
  .site-section,
  .site-footer__inner {
    inline-size: min(100% - (2 * var(--zx-space-4)), var(--site-content-width));
  }

  .site-nav {
    font-size: var(--zx-text-sm);
  }

  .hero__actions {
    inline-size: 100%;
  }

  .hero__actions .site-btn {
    flex: 1 1 190px;
  }

  .site-footer__inner {
    gap: var(--zx-space-6);
  }

  .site-footer__stamp {
    inline-size: min(100% - (2 * var(--zx-space-4)), var(--site-content-width));
  }

  .site-footer__brand {
    align-items: flex-start;
  }

}