/* Phone composition: keep the tablet and desktop layouts intact. */
@media (max-width: 575px) {
  /* 12.5% larger than the original .75-width square scene. */
  #how .decision-visual {
    width: calc(.84375 * (100% + 2 * var(--decision-overhang)));
  }

  #request-demo .statement-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: center;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #request-demo .statement-visual-wide { display: none; }
  #request-demo .statement-visual-original {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #request-demo .statement-action {
    justify-content: center;
    gap: 8px;
    padding-inline: 12px;
    font-size: clamp(12px, 3.33vw, 13px);
  }
  #request-demo .statement-action-label { white-space: nowrap; }
  #request-demo .statement-action-label br { display: none; }

  #quiet .quiet-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #quiet .quiet-visual-wide { display: none; }
  #quiet .quiet-visual-original {
    inset: 0 auto 0 -6%;
    width: 106%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 360px) {
  #request-demo .statement-action {
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-inline: 8px;
    gap: 6px;
  }
}