/* The Everywhere family rests on one shared visual ground, like the device
   composition used in Habits marketing. The monitor and laptop account for
   their stands; handheld devices meet the same line directly. */
.device-ecosystem {
  --device-ground: 62px;
  --imac-footprint: 126px;
  --macbook-footprint: 17px;
}

.device-ecosystem .imac-device {
  top: auto;
  bottom: calc(var(--device-ground) + var(--imac-footprint));
}

.device-ecosystem .macbook-device {
  top: auto;
  bottom: calc(var(--device-ground) + var(--macbook-footprint));
}

.device-ecosystem .ipad-device,
.device-ecosystem .ecosystem-iphone,
.device-ecosystem .watch-flat-mini {
  top: auto;
  bottom: var(--device-ground);
}

/* The iPad is a generous portrait device, while the Watch stays tucked
   between it and the Mac instead of crowding the iPhone. */
.device-ecosystem .ipad-device {
  right: 32px;
  width: 170px;
  aspect-ratio: 11 / 16;
}

.device-ecosystem .watch-flat-mini {
  --watch-width: 78px;
  --watch-height: 142px;
  --case-width: 68px;
  --case-height: 82px;
  --screen-inset: 3px;
  --band-width: 42px;
  --band-height: 52px;
  right: 180px;
}

/* Keep the complete Apple silhouette—including its leaf—clear of the chin. */
.imac-chin {
  overflow: visible;
}

.imac-chin .imac-apple-mark {
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.imac-chin .imac-apple-leaf {
  transform: translateX(-34px);
}

/* Keep the sport band genuinely black, with only the subtle edge light that
   makes it read as material rather than a flat cut-out. */
.watch-flat-band {
  border-color: #030303;
  background: linear-gradient(90deg, #010101 0%, #111 48%, #020202 100%);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .05), inset -2px 0 rgba(0, 0, 0, .58);
}

@media (max-width: 480px) {
  .device-ecosystem {
    --device-ground: 18px;
    --imac-footprint: 78px;
    --macbook-footprint: 10px;
  }

  .device-ecosystem .watch-flat-mini {
    right: 124px;
  }

  .device-ecosystem .ipad-device {
    right: 25px;
    width: 112px;
  }
}