/* Connie's September 17 homepage revisions. Original character art is unchanged. */
.hero { padding-bottom: 28px; }
/* Keep resting arms just touching as the garden changes width. */
/* Center the visible resting arms, including each PNG's transparent margins.
   Arm extents come from the standing artwork, not the canvas boxes. */
.hero-art {
  --character-height: 427px;
  --character-half-gap: min(61px, 14%);
  --grandma-arm-reach: min(calc(var(--character-height) * .131), 16.970455%);
  --grandpa-arm-reach: min(calc(var(--character-height) * .1608368), 16.790958%);
  --pair-center: calc(50% + (var(--grandma-arm-reach) - var(--grandpa-arm-reach)) / 2);
}
.grandma-player, .grandma-fallback {
  left: calc(var(--pair-center) - 28.5% - var(--character-half-gap));
  bottom: 3%;
}
.grandpa-player, .grandpa-fallback {
  right: calc(100% - var(--pair-center) - 28.5% - var(--character-half-gap));
  bottom: 3.6%;
  transform: scale(.8624);
  transform-origin: center bottom;
}
.grandma-touch {
  left: calc(var(--pair-center) - 13% - var(--character-half-gap));
  width: 26%; bottom: 3%;
}
.grandpa-touch {
  right: calc(100% - var(--pair-center) - 11.5% - var(--character-half-gap));
  width: 23%; height: 86%; bottom: 3%;
}
@media (max-width: 1050px) {
  .hero-art { --character-height: 370px; --character-half-gap: min(53px, 14%); }
}
@media (max-width: 760px) {
  .hero-art { --character-height: 315px; --character-half-gap: min(45px, 14%); }
}
@media (max-width: 360px) {
  .hero-art { --character-height: 280px; --character-half-gap: min(40px, 14%); }
}
.promise-home-points p { font-size: 16px; line-height: 1.6; }
.promise-home-heading .promise-creators { margin-top: 0; }
@media (max-width: 1050px) and (min-width: 761px) {
  .promise-home-points p { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 24px; }
}

/* Match the background crop exactly, retaining its original pixels through
   the extracted flower alpha. This layer occludes both canvas and still art. */
.garden-foreground {
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: url('/assets/backyard-foreground-mask-v1.png');
  mask-image: url('/assets/backyard-foreground-mask-v1.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center 60%;
  mask-position: center 60%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}