body:has(.download-hero) {
  container-type: inline-size;
}

.download-page {
  padding-block-start: 0;
}

.support-page > .category-content:has(> .download-hero:not([hidden])) {
  padding-block: 0;
}

.download-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--content-padding-block);
  padding-block: var(--content-padding-block);
  text-align: center;
}

.download-hero::before {
  content: "";
  position: absolute;
  z-index: var(--z-index-background);
  inset-block: 0;
  inset-inline-start: 50%;
  width: 100cqw;
  translate: -50% 0;
  background: rgb(var(--color-gray-100));
  pointer-events: none;
}

.download-hero-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-2xl);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.download-platforms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
  gap: var(--space-xs);
  width: min(100%, var(--layout-reading-inline-size-max));
}

.download-platform {
  display: grid;
  grid-template-columns: var(--size-control-sm) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--download-platform-label-gap);
  min-width: 0;
  min-height: var(--download-platform-card-block-size-min);
  width: 100%;
  padding-block: var(--space-md);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-squircle-md);
  background: rgb(var(--color-white));
  text-align: left;
}

.download-platform-info {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.download-platform-label {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-2xl);
}

.download-platform-icon {
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  background: currentColor;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.download-platform-icon--windows {
  mask-image: url("../../../assets/icons/windows.svg");
}

.download-platform-icon--macos {
  mask-image: url("../../../assets/icons/apple.svg");
}

.download-platform-meta {
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--font-line-height-md);
}

.download-platform-action-label {
  display: none;
}

.download-platform-action-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  background: currentColor;
  mask: url("../../../assets/icons/download.svg") center / contain no-repeat;
}

@media (min-width: 40rem) {
  .download-platform {
    grid-template-columns: var(--size-control-lg) minmax(0, 1fr) auto;
    padding-inline: var(--space-2xl);
  }

  .download-platform-icon {
    width: var(--size-control-lg);
    height: var(--size-control-lg);
  }

  .button.download-platform-action {
    width: auto;
    padding-inline: var(--space-xs);
  }

  .download-platform-action-label {
    display: inline;
  }
}

@media (min-width: 64rem) {
  .download-platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    width: 100%;
  }
}