.lyre-hero-downloads {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.lyre-download-primary,
.lyre-download-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: background 160ms ease;
}
.lyre-download-primary {
  padding: 0 20px;
  background: #fafafa;
  color: #111;
}
.lyre-download-primary:hover {
  background: #dedede;
}
.lyre-download-header {
  min-height: 40px;
  padding: 0 14px;
  gap: 8px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px;
  white-space: nowrap;
}
.lyre-download-header svg {
  width: 16px;
  height: 16px;
}
.lyre-download-store {
  padding: 0 14px;
  border: 1px solid #ffffff40;
  color: #fff;
  background: #1116;
}
a.lyre-download-store:hover {
  background: #ffffff25;
}

/* The browser client is secondary to installing the desktop host. Keep its
   metrics aligned with the primary action and use an outlined treatment. */
.lyre-browser-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--site-text);
  text-decoration: none;
  white-space: normal;
  font:
    600 16px 'Source Sans 3',
    system-ui,
    sans-serif;
  transition: background 160ms ease;
}
.lyre-browser-link:hover {
  background: var(--site-surface);
}
#site-header[data-tone='ink'] .lyre-browser-link {
  color: #f3f3f3;
}
#site-header[data-tone='ink'] .lyre-browser-link:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lyre-browser-link:focus-visible {
  outline: 2px solid var(--site-text);
  outline-offset: 2px;
}
/* Header browser CTA mirrors the header desktop button's metrics (height,
   radius, padding, gap and weight) so the pair reads as one set. */
.lyre-browser-header {
  min-height: 40px;
  padding: 0 14px;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}
.lyre-browser-arrow {
  width: 16px;
  height: 16px;
  flex: none;
}
.lyre-download-status {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}
/* Label variants: the full CTA copy is the default. The phone breakpoint below
   prefers the mid-length header variant and falls back to the compact short
   one when even that cannot share the header row. */
.lyre-cta-label-header,
.lyre-cta-label-short {
  display: none;
}
/* The release-updates link is a real tap target on a phone, so it keeps a 44px
   row while its 13px/14px label stays exactly as large as the copy around it. */
.lyre-release-updates {
  flex-basis: 100%;
  min-height: 44px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  text-align: center;
  text-underline-offset: 4px;
}
.lyre-hero-downloads a:focus-visible {
  outline: 2px solid white;
  outline-offset: 4px;
}

/* Compact headers: use a platform-aware download label and the matching short
   browser label before either CTA can dominate the row. Scope these selectors
   to the header so the hero's primary download keeps its full text. */
@media (max-width: 760px) {
  .lyre-download-header,
  .lyre-browser-header {
    min-height: 36px;
    padding: 0 11px;
    gap: 6px;
  }
  .lyre-download-header svg,
  .lyre-browser-arrow {
    width: 14px;
    height: 14px;
  }
  .lyre-download-header .lyre-cta-label-full,
  .lyre-browser-header .lyre-cta-label-full {
    display: none;
  }
  .lyre-download-header .lyre-cta-label-header {
    display: inline;
  }
  .lyre-browser-header .lyre-cta-label-short {
    display: inline;
  }
  /* Hero: stack the primary download as a full-width row and let the two
     store badges share the next row evenly instead of wrapping raggedly. */
  .lyre-hero-downloads {
    gap: 10px;
  }
  .lyre-hero-downloads .lyre-download-primary {
    flex: 1 1 100%;
    min-height: 52px;
    padding: 0 18px;
    font-size: 15px;
  }
  .lyre-hero-downloads .lyre-download-store {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
  }
  .lyre-release-updates {
    margin-top: 2px;
  }
}

/* Narrow phones: the mid-length pair (including the OS name) still crowds the
   header beside the brand and menu button, so lean on the compact fallback. */
@media (max-width: 400px) {
  .lyre-download-header .lyre-cta-label-header {
    display: none;
  }
  .lyre-download-header .lyre-cta-label-short {
    display: inline;
  }
}

/* Small phones still keep both labels. Slightly tighter metrics leave enough
   room for the brand and the 44px navigation target without horizontal scroll. */
@media (max-width: 360px) {
  .lyre-download-header,
  .lyre-browser-header {
    padding: 0 7px;
    gap: 4px;
  }
  .lyre-download-header svg,
  .lyre-browser-arrow {
    width: 13px;
    height: 13px;
  }
}