.funflow-prototype {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.funflow-prototype .home-navbar,
.funflow-prototype .minimal-footer,
.funflow-prototype .footer {
  display: none !important;
}

.funflow-prototype .page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 32px;
}

.funflow-prototype .hero {
  width: min(1440px, calc(100% - clamp(48px, 8vw, 144px)));
  min-height: clamp(640px, 52vw, 760px);
  grid-template-columns: minmax(520px, 1.05fr) minmax(500px, 0.95fr);
  gap: clamp(28px, 4vw, 72px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
  overflow: visible;
}

.funflow-prototype .hero-copy {
  max-width: 680px;
}

.funflow-prototype .hero-visual {
  width: min(100%, 640px);
  min-width: 0;
  justify-self: end;
}

.funflow-prototype .phone-stage {
  right: 0;
  width: clamp(500px, 40vw, 600px);
  height: clamp(470px, 37vw, 550px);
  transform: translateY(-50%);
  transform-origin: right center;
}

@media (min-width: 1600px) {
  .funflow-prototype .hero {
    width: min(1480px, calc(100% - 192px));
  }
}

@media (max-width: 1180px) {
  .funflow-prototype .hero {
    width: min(980px, calc(100% - 48px));
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .funflow-prototype .hero-copy {
    max-width: 760px;
  }

  .funflow-prototype .hero-visual {
    width: 100%;
    justify-self: center;
  }

  .funflow-prototype .phone-stage {
    left: auto;
    right: 50%;
    width: 600px;
    height: 550px;
    transform: translate(50%, -50%) scale(0.9);
    transform-origin: center;
  }
}

.funflow-prototype .section,
.funflow-prototype .cta {
  width: min(1280px, calc(100% - clamp(48px, 10vw, 160px)));
  margin-right: auto;
  margin-left: auto;
}

.funflow-prototype .cta {
  margin-top: 40px;
  margin-bottom: 80px;
}

.funflow-prototype img {
  display: block;
}

@media (max-width: 768px) {
  .funflow-prototype .page {
    width: 100%;
    padding-top: 72px;
  }

  .funflow-prototype .hero {
    width: calc(100% - 32px);
    padding-right: 24px;
    padding-left: 24px;
  }

  .funflow-prototype .hero-visual {
    min-height: 440px;
  }

  .funflow-prototype .phone-stage {
    left: auto;
    right: 50%;
    width: 600px;
    height: 550px;
    transform: translate(50%, -50%) scale(0.68);
  }

  .funflow-prototype .section,
  .funflow-prototype .cta {
    width: calc(100% - 32px);
  }
}
