/* Illustrated hardware and audience-specific family composition. */
.device {
  position: relative;
  --bezel: #141719;
  --edge: #9ba6a4;
  filter: drop-shadow(0 16px 15px rgba(0, 0, 0, 0.35));
}
.device-screen {
  position: relative;
  border: 9px solid var(--bezel);
  border-radius: 16px;
  background: #080909;
  box-shadow: 0 0 0 1px var(--edge);
  overflow: hidden;
}
.device-screen img {
  width: 100%;
  height: auto;
}
.device-mac .device-screen {
  border-width: 10px 10px 16px;
  border-radius: 13px 13px 6px 6px;
}
.device-mac .hardware {
  height: 14px;
  background: linear-gradient(#c4ccca, #778480 60%, #3c4541);
  margin: 0 -7%;
  border-radius: 2px 2px 50% 50%;
  position: relative;
}
.device-mac .hardware:after {
  content: "";
  position: absolute;
  left: 42%;
  width: 16%;
  height: 4px;
  background: #5b6863;
  border-radius: 0 0 5px 5px;
}
.device-iphone .device-screen {
  border-width: 7px;
  border-radius: 29px;
  box-shadow: 0 0 0 1px #aeb5b9, 0 0 0 3px #353c3d;
}
.device-iphone .device-screen:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 33%;
  width: 34%;
  height: 10px;
  border-radius: 15px;
  background: #080909;
}
.device-iphone .hardware {
  position: absolute;
  left: -5px;
  top: 18%;
  height: 14%;
  width: 3px;
  border-radius: 2px;
  background: #85908c;
}
.device-ipad .device-screen {
  border-width: 10px;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #b9c2c0, 0 0 0 3px #34423e;
}
.device-ipad .device-screen:after {
  content: "";
  position: absolute;
  top: 42%;
  left: -7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #53616a;
}
.device-tv .device-screen {
  border: 6px solid #161b1b;
  border-radius: 3px;
}
.device-tv .hardware {
  height: 20px;
  position: relative;
}
/* A centred pedestal, drawn wholly below the screen. The earlier splayed legs were
   bars rotated about their centres, so their inner ends cut into the picture. */
.device-tv .hardware:before,
.device-tv .hardware:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.device-tv .hardware:before {
  top: 0;
  width: 4%;
  height: 75%;
  background: linear-gradient(90deg, #5b6863, #909c96 50%, #5b6863);
}
.device-tv .hardware:after {
  bottom: 0;
  width: 30%;
  height: 30%;
  min-height: 3px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(#c4ccca, #778480 60%, #3c4541);
}
.tv-box {
  position: absolute;
  right: 10%;
  bottom: -8%;
  width: 17%;
  height: 10%;
  border-radius: 7px;
  background: linear-gradient(145deg, #343b3b, #080b0b);
  border: 1px solid #7a8580;
  box-shadow: 0 5px 0 #0a0e0e;
}
.remote {
  position: absolute;
  right: 0;
  bottom: -11%;
  width: 5%;
  height: 23%;
  border-radius: 6px;
  background: #bbc3c3;
  transform: rotate(12deg);
  border: 1px solid #e0e5e4;
}
.remote:before {
  content: "";
  position: absolute;
  top: 7%;
  left: 12%;
  width: 76%;
  aspect-ratio: 1;
  border: 3px solid #3c4343;
  border-radius: 50%;
  background: #849292;
}
.remote:after {
  content: "";
  position: absolute;
  top: 48%;
  left: 30%;
  width: 40%;
  height: 7%;
  background: #303a3a;
  border-radius: 10px;
  box-shadow: 0 8px #303a3a, 0 16px #303a3a;
}
/* Hero composition: the selected device leads at full column width and the other
   three sit in a quieter strip below it. Lead choice is pure CSS on
   body[data-audience], so the static Mac default needs no script. */
.family-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 34px 18px;
}
.family .device {
  grid-row: 2;
  filter: saturate(0.8) brightness(0.86) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.35));
  transition: filter 140ms ease;
}
/* Strip sizes put all four at roughly the same height. */
.family .device-tv {
  width: 84%;
}
.family .device-mac {
  width: 76%;
}
.family .device-ipad {
  width: 62%;
}
.family .device-iphone {
  width: 25%;
}
.family .device-iphone .device-screen {
  border-width: 3px;
  border-radius: 11px;
}
.family .device-iphone .device-screen:after {
  height: 4px;
  top: 2px;
}
.family .device-ipad .device-screen {
  border-width: 4px;
  border-radius: 9px;
}
.family .device-mac .device-screen {
  border-width: 4px 4px 7px;
}
.family .device-tv .device-screen {
  border-width: 3px;
}
.family .device-mac .hardware {
  height: 7px;
}
.family .device-tv .hardware {
  height: 12px;
}
.family .remote:after {
  box-shadow: 0 3px #303a3a, 0 6px #303a3a;
}
/* The lead. */
body[data-audience="mac"] .family .device-mac,
body[data-audience="iphone"] .family .device-iphone,
body[data-audience="ipad"] .family .device-ipad,
body[data-audience="tv"] .family .device-tv {
  grid-row: 1;
  grid-column: 1 / -1;
  filter: drop-shadow(0 16px 15px rgba(0, 0, 0, 0.35));
}
body[data-audience="mac"] .family .device-mac {
  width: 100%;
}
body[data-audience="mac"] .family .device-mac .device-screen {
  border-width: 9px 9px 14px;
}
body[data-audience="mac"] .family .device-mac .hardware {
  height: 12px;
}
body[data-audience="ipad"] .family .device-ipad {
  width: 84%;
}
body[data-audience="ipad"] .family .device-ipad .device-screen {
  border-width: 9px;
  border-radius: 20px;
}
body[data-audience="iphone"] .family .device-iphone {
  width: 29%;
}
body[data-audience="iphone"] .family .device-iphone .device-screen {
  border-width: 7px;
  border-radius: 29px;
}
body[data-audience="iphone"] .family .device-iphone .device-screen:after {
  height: 10px;
  top: 4px;
}
body[data-audience="tv"] .family .device-tv {
  width: 100%;
}
body[data-audience="tv"] .family .device-tv .device-screen {
  border-width: 6px;
}
body[data-audience="tv"] .family .device-tv .hardware {
  height: 20px;
}
body[data-audience="tv"] .family .remote:after {
  box-shadow: 0 6px #303a3a, 0 12px #303a3a;
}
/* Apple TV's story is two devices working together, not four in a row: the strip
   gives way to the phone that listens for it. */
body[data-audience="tv"] .family .device:not(.device-tv) {
  display: none;
}
.listener {
  display: none;
}
body[data-audience="tv"] .listener {
  display: flex;
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: start;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  padding: 12px 22px 12px 14px;
  border-radius: 18px;
  background: #0a1716;
  box-shadow: 0 0 0 1px #2f5a4b;
}
.listener p {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  color: #eaf3ec;
}
.listener b {
  display: block;
  font-weight: 900;
}
.listener-phone {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 0.49;
  border: 4px solid #141719;
  border-radius: 12px;
  background: #080909;
  box-shadow: 0 0 0 1px #aeb5b9;
}
.listener-mic {
  width: 22px;
  fill: none;
  stroke: #93cdbb;
  stroke-width: 2;
  stroke-linecap: round;
}
.listener-mic rect {
  fill: #93cdbb;
  stroke: none;
}
/* Sound arcs rise from the phone's top corner toward the screen above. They stay
   inside the phone's column: drawn over the label, they cut its contrast to 1.6:1. */
.listener-waves {
  position: absolute;
  width: 30px;
  right: -6px;
  top: -32px;
  fill: none;
  stroke: #93cdbb;
  stroke-width: 2.6;
  stroke-linecap: round;
  transform: rotate(90deg);
  overflow: visible;
}
.listener-waves path {
  animation: listen 2.4s ease-in-out infinite;
}
.listener-waves path:nth-child(2) {
  animation-delay: 0.3s;
}
.listener-waves path:nth-child(3) {
  animation-delay: 0.6s;
}
/* Fully drawn is the resting state, so reduced motion (no animation) shows all arcs. */
@keyframes listen {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
/* The Mac edition's own feature is its Apple Music player, so its screen carries a
   card for it. Illustrative like the listener: no song titles or album art, because
   the only player captures use fixture songs credited to real artists. */
.player-card {
  position: absolute;
  left: 3.5%;
  bottom: 6%;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 66%;
  padding: 12px 20px 16px 12px;
  border-radius: 14px;
  background: #0a1716;
  box-shadow: 0 0 0 1px #2f5a4b, 0 10px 22px rgba(0, 0, 0, 0.5);
  color: #eaf3ec;
  text-align: left;
}
.player-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}
.player-card b {
  display: block;
  font-weight: 900;
}
.player-note {
  flex: none;
  width: 42px;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 10px;
  background: #93cdbb;
  fill: none;
  stroke: #0a1716;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-note circle {
  fill: #0a1716;
}
/* A scrubber like the player's own, at rest partway through a song. */
.player-progress {
  position: absolute;
  left: 12px;
  right: 20px;
  bottom: 7px;
  height: 3px;
  border-radius: 2px;
  background: #2f5a4b;
}
.player-progress i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: #93cdbb;
}
/* In the hero it belongs to the lead Mac only, not the small one in the strip. */
.family .player-card {
  display: none;
}
body[data-audience="mac"] .family .player-card {
  display: flex;
}