/* One consistent, model-rendered top-screen crop for every marketing phone. */
.nesting-phone-top-crop {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: .92;
  overflow: hidden;
  isolation: isolate;
}
.nesting-phone-top-crop > .nesting-phone-static {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.nesting-phone-top-crop > .nesting-phone-static img,
.home-experience .bento-phone.nesting-phone-top-crop > .nesting-phone-static img {
  position: absolute;
  top: -1%;
  left: 50%;
  width: 200%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
}
.nesting-phone-top-crop > .nesting-phone-missing {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 51% 38%, rgba(255,249,241,.9) 0 9%, transparent 9.5%),
    radial-gradient(circle at 51% 38%, transparent 0 25%, rgba(116,151,145,.22) 25.4% 25.8%, transparent 26.2%),
    linear-gradient(145deg,#dce9df,#f2d8df 58%,#d8e9f1);
}
.nesting-phone-top-crop > .nesting-phone-missing:before,
.nesting-phone-top-crop > .nesting-phone-missing:after {
  content:"";
  position:absolute;
  left:50%;
  top:38%;
  width:43%;
  aspect-ratio:1;
  border:1px solid rgba(64,93,80,.24);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.nesting-phone-top-crop > .nesting-phone-missing:after {
  width:24%;
  background:rgba(255,249,241,.32);
  transform:translate(45%,-100%);
}
.nesting-phone-top-crop > .nesting-phone-caption {
  display: none;
}

.feature-preview-art {
  position: relative;
  height: 272px;
  margin: -21px -21px 17px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, #dce9df, #f2d8df 58%, #d8e9f1);
}
.feature-tile-phone {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.feature-tile-phone > .nesting-phone-static img {
  width: 200%;
}
.feature-tile .nesting-phone-caption {
  display: none;
}
.feature-group > div { align-items: stretch; }
.tool-detail-preview {
  width: min(100%, 460px);
  margin: 0 0 30px;
}
.tool-detail-preview .nesting-phone {
  width: 100%;
  margin: 0;
}
.feature-tile { overflow: hidden; }
.feature-tile .tile-mark {
  width: 32px;
  height: 32px;
  margin: 0 0 16px;
  background: #e9d5dc;
  box-shadow: inset 0 0 0 8px rgba(255, 249, 241, .58);
}
.center-semantic-media { width:100%; height:100%; }
.legacy-phone-example { width:min(100%,380px); margin:0 auto; }
.legacy-phone-example .nesting-phone-caption { display:none; }
.website-semantic-screenshot {
  display:block;
  width:100%;
  min-height:240px;
  border-radius:22px;
  background:
    radial-gradient(circle at 52% 42%,rgba(255,249,241,.85) 0 11%,transparent 11.5%),
    radial-gradient(circle at 52% 42%,transparent 0 29%,rgba(64,93,80,.2) 29.4% 29.8%,transparent 30.2%),
    linear-gradient(145deg,#dce9df,#f2d8df 58%,#d8e9f1);
}

.center-page .center-tool-media { aspect-ratio: 1 / 1; }
.center-tool-media .nesting-phone { width: 100%; height: 100%; }
#toolModal .center-modal-media {
  position: relative;
  height: auto;
  aspect-ratio: 1.08 / 1;
  overflow: hidden;
}
#toolModal .center-modal-media img {
  position: absolute;
  top: -1%;
  left: 50%;
  width: 200%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

@media (max-width: 620px) {
  .feature-preview-art { height: 320px; }
  .center-page .center-tool-media { aspect-ratio: 1.08 / 1; }
}