.demo {
  height: 300svh;
  position: relative;
  background: #e7e9e7;
  color: #0c2030
}

.demo-sticky {
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.demo-heading {
  position: absolute;
  top: 9%;
  left: 7%;
  right: 7%;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  z-index: 3
}

.demo-heading h2 {
  font-size: clamp(28px, 4vw, 65px);
  letter-spacing: -.06em;
  font-weight: 500;
  margin: 10px 0
}

.demo-heading p {
  font-size: 13px;
  line-height: 1.5;
  max-width: 250px
}

.device {
  position: absolute;
  top: 54%;
  left: 50%;
  width: min(76vw, 1100px);
  height: min(53vw, 540px);
  transform: translate(-50%, -40%);
  border: 9px solid #101a23;
  border-radius: 14px;
  background: #d7c6ae;
  box-shadow: 0 45px 120px #10213240;
  overflow: hidden;
  will-change: transform, width, height, border-radius
}

.device-bar {
  height: 30px;
  background: #101a23;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 12px
}

.device-bar i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7e8e98
}

.demo-screen {
  height: calc(100% - 30px);
  background: linear-gradient(90deg, #2d2a25bd, #342d2455), url("../images/image-386d0d8809434919.webp") center 38%/cover;
  position: relative;
  color: #fff;
  overflow: hidden
}

.demo-screen header {
  display: flex;
  justify-content: space-between;
  padding: 22px 5%;
  font-size: 10px;
  letter-spacing: .2em
}

.demo-screen h3 {
  position: absolute;
  bottom: 10%;
  left: 6%;
  font: normal clamp(38px, 6vw, 90px)/.95 Georgia, serif;
  letter-spacing: -.06em;
  margin: 0
}

.demo-screen small {
  position: absolute;
  bottom: 5%;
  left: 6%;
  letter-spacing: .17em;
  font-size: 9px
}


.demo-sticky {
  height: 100svh;
  min-height: 0;
  overflow: hidden
}

.demo-heading {
  top: clamp(82px, 11svh, 120px);
  left: 7%;
  right: 7%;
  z-index: 5;
  pointer-events: none
}

.demo-heading h2 {
  font-size: clamp(30px, 3.5vw, 55px);
  line-height: 1.02;
  margin: 8px 0
}

.device {
  top: 67% !important;
  left: 50%;
  height: min(48svh, 490px);
  max-height: 52svh !important;
  transform: translate(-50%, -50%) !important
}

.device-note {
  bottom: 2.5%;
  z-index: 2
}

@media(max-width:750px) {
  .demo-heading {
    top: 10svh
  }

  .demo-heading h2 {
    font-size: clamp(28px, 7vw, 46px)
  }

  .device {
    top: 66% !important;
    max-height: 48svh !important
  }

  .device-note {
    bottom: 3%
  }
}

@media(max-height:650px) and (min-width:751px) {
  .demo-heading {
    top: 11svh
  }

  .demo-heading h2 {
    font-size: clamp(27px, 3vw, 44px)
  }

  .device {
    top: 69% !important;
    max-height: 46svh !important
  }
}

/* V32: genuine desktop-screen proportions, limited by both available height and width. */
.demo .device {
  width: min(61vw, 85.4svh, 850px);
  height: auto;
  aspect-ratio: 16/9
}

@media(min-width:751px) {
  .demo-screen h3 {
    font-size: clamp(35px, 4vw, 68px)
  }
}

/* V33: true smartphone silhouette (9:19.5), including its responsive content. */
.demo .device {
  max-height: none !important;
  aspect-ratio: auto;
  top: 65% !important;
  transform: translate(-50%, -50%) !important;
  transition: none
}

.demo .device-bar {
  height: calc(30px - 7px * var(--morph, 0));
  flex-shrink: 0
}

.demo .demo-screen {
  height: calc(100% - (30px - 7px * var(--morph, 0)))
}

.demo .demo-screen header {
  padding: calc(22px - 10px * var(--morph, 0)) calc(5% + 1% * var(--morph, 0));
  font-size: calc(10px - 2px * var(--morph, 0));
  gap: 8px
}

.demo .demo-screen h3 {
  font-size: calc(64px - 37px * var(--morph, 0)) !important;
  line-height: .98;
  bottom: calc(12% + 7% * var(--morph, 0));
  left: calc(6% + 2% * var(--morph, 0));
  max-width: 88%;
  overflow-wrap: normal
}

.demo .demo-screen small {
  font-size: calc(9px - 2px * var(--morph, 0));
  letter-spacing: calc(.17em - .07em * var(--morph, 0));
  left: 8%;
  right: 6%;
  bottom: 6%;
  line-height: 1.4
}

.demo .device.is-phone {
  border-width: 7px;
  border-radius: 36px !important
}

.demo .device.is-phone .device-bar {
  height: 24px;
  justify-content: center;
  padding: 0
}

.demo .device.is-phone .device-bar i {
  width: 4px;
  height: 4px
}

.demo .device.is-phone .demo-screen {
  height: calc(100% - 24px);
  background-position: 59% center
}

.demo .device.is-phone .demo-screen header {
  font-size: 8px;
  letter-spacing: .07em;
  padding: 14px 10px
}

.demo .device.is-phone .demo-screen h3 {
  font-size: clamp(23px, 2.2vw, 31px) !important;
  bottom: 19%;
  left: 8%;
  letter-spacing: -.055em
}

.demo .device.is-phone .demo-screen small {
  font-size: 7px;
  letter-spacing: .06em;
  bottom: 7%;
  max-width: 84%
}

@media(max-width:750px) {
  .demo .device {
    top: 65% !important
  }

  .demo .device.is-phone .demo-screen h3 {
    font-size: 22px !important
  }
}