/* Interface Networld — high-DPI / pixel-precision pass */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

img,
svg {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

.brand-logo,
.hero-logo,
.footer-brand img,
.eco-core img {
  display: block;
  height: auto;
  max-width: 100%;
  filter: none;
}

/* Keep primary brand artwork on whole CSS pixels to avoid fractional blur. */
.brand-logo {
  width: 104px;
}

.hero-logo {
  width: min(76%, 576px);
}

.footer-brand img {
  width: 168px;
}

/* Thin UI rules render more cleanly on Retina/high-density screens. */
.topbar,
.quick-grid,
.product-card,
.dev-console,
.metrics-band,
.flow > div,
.eco-node,
.site-footer,
.button,
.nav-signin {
  outline: 1px solid transparent;
}

/* Avoid blurry fractional transforms on static artwork. */
.brand-logo,
.hero-logo,
.footer-brand img,
.eco-core img,
.product-icon,
.quick-icon {
  transform: none;
  backface-visibility: visible;
}

@media (min-resolution: 2dppx) {
  .site-grid {
    background-size: 48px 48px;
  }

  .main-nav a.active::after,
  .main-nav a:hover::after {
    height: 1px;
  }

  .orbit,
  .world-glow,
  .globe-grid {
    border-width: 1px;
  }
}

@media (max-width: 800px) {
  .brand-logo {
    width: 88px;
  }

  .hero-logo {
    width: min(82%, 448px);
  }
}