.hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: clamp(32px, 7vw, 88px);
  align-items: center;
}

.hero-copy { min-width: 0; }

.hero-downloads {
  width: 100%;
  display: grid;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}

.hero-download-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 4px;
  color: var(--muted);
  font-size: var(--fs-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-download-head b {
  color: var(--blue);
  font-size: var(--fs-micro);
  white-space: nowrap;
}

.hero-download-button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--glass-tint);
  box-shadow: 0 10px 28px rgba(18, 30, 55, .08), inset 0 1px 0 rgba(255, 255, 255, .55);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hero-download-button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 48%, var(--hairline));
  box-shadow: 0 14px 34px rgba(18, 30, 55, .13), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.hero-download-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 34%, transparent);
  outline-offset: 2px;
}

.hero-download-button svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.hero-download-button.windows svg { color: #0078d4; }
.hero-download-button.apple svg { color: var(--ink); }

.hero-download-button > span {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.hero-download-button small {
  color: var(--muted);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
}

.hero-download-button strong {
  font-size: var(--fs-copy);
  font-weight: 700;
}

.hero-download-button > b {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Download weight, on the button itself. 160-185 MB is a real commitment on a phone
   tether or a metered line, and finding out only once the transfer starts is the kind
   of surprise that loses the install. */
.hero-download-button > b i {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  opacity: .8;
}

.hero-req {
  margin: 0 2px;
  color: var(--muted);
  font-size: var(--fs-micro);
  line-height: 1.45;
  letter-spacing: .02em;
}

.hero-downloads > p {
  margin: 2px 2px 0;
  color: var(--muted);
  font-size: var(--fs-tiny);
}

.hero-downloads > p span { color: var(--blue); }

@media (max-width: 820px) {
  .hero-intro { grid-template-columns: 1fr; gap: 28px; }
  .hero-downloads { max-width: 270px; padding-left: 0; border-left: 0; }
}

@media (max-width: 480px) {
  .hero-downloads { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-download-button { transition: none; }
}