:root {
  --download-hero-space: clamp(68px, 9vw, 112px);
  --download-card-gap: 20px;
  --download-icon-size: 48px;
  --download-table-min: 760px;
}

.download-hero {
  position: relative;
  overflow-x: clip;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 82% 18%, var(--color-hero-blue), var(--color-transparent) 34%),
    radial-gradient(circle at 72% 72%, var(--color-hero-mint), var(--color-transparent) 38%),
    var(--color-bg);
}

.download-hero-grid {
  min-height: 560px;
  padding-top: var(--download-hero-space);
  padding-bottom: var(--download-hero-space);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.75fr);
  align-items: center;
  gap: clamp(38px, 7vw, 88px);
}

.download-hero-copy h1 {
  max-width: 12em;
  margin-bottom: 20px;
  font-size: clamp(34px, 4vw, 48px);
}

.download-lead {
  max-width: 42em;
  margin-bottom: 26px;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.8;
}

.download-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.download-guide {
  position: relative;
  overflow: hidden;
}

.download-guide::after {
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 150px;
  height: 150px;
  border: 1px solid var(--color-accent-line);
  border-radius: 50%;
  background: var(--color-accent-soft);
  content: "";
  pointer-events: none;
}

.pick-steps {
  position: relative;
  z-index: 1;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  counter-reset: download-pick;
  display: grid;
  gap: 20px;
}

.pick-steps li {
  position: relative;
  min-height: 42px;
  padding-left: 54px;
  counter-increment: download-pick;
}

.pick-steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  content: counter(download-pick, decimal-leading-zero);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.pick-steps strong,
.pick-steps span {
  display: block;
}

.pick-steps strong {
  margin-bottom: 2px;
  color: var(--color-text);
}

.pick-steps span {
  color: var(--color-text-muted);
  font-size: 14px;
}

.download-guide > .muted {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  font-size: 14px;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 34px;
}

.section-heading > p {
  color: var(--color-text-muted);
}

.download-tabs {
  margin-top: 34px;
}

.platform-tab-list {
  position: sticky;
  z-index: 18;
  top: calc(var(--nav-height) + 10px);
  box-shadow: var(--shadow-chip);
}

.platform-tab-list [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.platform-tab-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.platform-intro {
  margin-bottom: 26px;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.55fr);
  align-items: center;
  gap: 28px;
}

.platform-intro h3 {
  margin-bottom: 8px;
  font-size: 24px;
}

.platform-intro p {
  margin: 0;
  color: var(--color-text-muted);
}

.requirement-table {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  display: grid;
  grid-template-columns: minmax(90px, 0.65fr) minmax(0, 1fr);
  gap: 8px 14px;
  font-size: 13px;
}

.requirement-table span {
  color: var(--color-text-muted);
}

.requirement-table strong {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.client-card {
  display: flex;
  flex-direction: column;
}

.client-card-icon {
  width: var(--download-icon-size);
  height: var(--download-icon-size);
  flex: 0 0 auto;
}

.client-card-body {
  flex: 1;
}

.client-card-body p:last-of-type {
  margin-bottom: 0;
}

.client-card-actions {
  align-items: stretch;
  flex-direction: column;
}

.client-card-actions .button-primary {
  width: 100%;
  min-height: 52px;
}

.client-card-actions .button-secondary {
  width: 100%;
  min-height: 48px;
}

.client-card-retired {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.download-grid-single {
  grid-template-columns: minmax(0, 720px);
}

.core-heading {
  margin-bottom: 24px;
}

.core-table-wrap {
  margin-top: 28px;
}

.core-table {
  min-width: var(--download-table-min);
}

.core-table .button {
  min-height: 40px;
  padding: 8px 14px;
  white-space: nowrap;
}

.core-notes {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--download-card-gap);
}

.core-note {
  padding: 24px;
}

.core-note h3 {
  font-size: 20px;
}

.core-note p {
  margin: 0;
  color: var(--color-text-muted);
}

.download-prose h3 {
  font-size: 22px;
}

.download-prose h3:first-child {
  margin-top: 0;
}

.download-help-links {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.version-slot {
  margin-top: 14px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.version-slot:not([hidden]):not(:empty) {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 9px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
}

@media (max-width: 900px) {
  .download-hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .download-guide {
    max-width: 680px;
  }

  .platform-intro {
    grid-template-columns: 1fr;
  }

  .core-notes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .download-hero-grid {
    padding-top: 54px;
    padding-bottom: 64px;
  }

  .download-hero-copy h1 {
    font-size: clamp(26px, 7.5vw, 30px);
  }

  .download-lead {
    font-size: 15px;
  }

  .download-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .download-hero-actions .button {
    width: 100%;
  }

  .download-guide {
    padding: 22px;
  }

  .platform-tab-list {
    top: calc(var(--nav-height) + 6px);
  }

  .platform-intro {
    padding: 20px;
  }

  .requirement-table {
    grid-template-columns: minmax(78px, 0.55fr) minmax(0, 1fr);
  }

  .download-help-links {
    align-items: stretch;
    flex-direction: column;
  }

  .download-help-links .button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .fact-pills {
    gap: 7px;
  }

  .fact-pill {
    padding-inline: 10px;
    font-size: 12px;
  }

  .client-card-head {
    gap: 12px;
  }

  .client-card-title h3 {
    font-size: 18px;
  }

  .requirement-table {
    padding: 13px;
    font-size: 12px;
  }
}