@font-face {
  font-family: 'Host Grotesk';
  src: url('fonts/HostGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
}

:root {
  --color-bg-primary: #ffffff;
  --color-accent-primary: #d4ff00;
  --color-accent-secondary: #ff5c8d;
  --color-chip-bg: #f0ffd8;
  --color-error: #ff0e57;
  --gradient-1: linear-gradient(
    90deg,
    rgba(255, 207, 221, 1) 0%,
    rgba(255, 92, 141, 1) 100%
  );
  --text-primary: #000000;
  --text-secondary: #777777;
  --m3-elevation-light-4-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3),
    0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --custom-width: 100vw;
  --design-width: 1440;
  --ratio: calc(var(--custom-width) / var(--design-width));
}

/* Default classes */
.pos-abs {
  position: absolute;
}
.fill-parent {
  width: 100%;
  height: 100%;
}
.bg-contain {
  background-size: contain;
}
.bg-cover {
  background-size: cover;
}
.bg-auto {
  background-size: auto;
}
.bg-crop {
  background-size: 100% 100%;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.pos-init {
  top: 0px;
  left: 0px;
}
.image-div {
  background-color: transparent;
  background-position: center;
}
/* Default classes end */

body {
  margin: 0px 0px;
  padding: 0px;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}
.parent-div {
  position: relative;
  width: var(--custom-width);
  height: calc(2400 * var(--ratio));
  overflow: hidden;
  margin: 0 auto;
  padding: 0px;
  box-sizing: border-box;
}
.landing--1-95101 {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 1;
  transform: rotate(0deg);
  background: #d4ff00ff;
}
.block--1-223 {
  width: 100%;
  height: 33.33%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
}
.frame-1-22162 {
  width: 85.38%;
  height: 6.63%;
  top: 6.13%;
  left: 7.29%;
  z-index: 3;
  transform: rotate(0deg);
}
.logo-2238 {
  width: 13.22%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
}
.fridge-I2238_2237 {
  width: 70.77%;
  height: 100%;
  top: 0%;
  left: 29.23%;
  z-index: 1;
  transform: rotate(0deg);
  text-align: left;
  line-height: 0px;
}
.fridge-I2238_2237-0 {
  font-size: calc(40 * var(--ratio));
  line-height: calc(40 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 600;
  white-space: pre-wrap;
  color: #010101ff;
}
.group-34-I2238_2234 {
  width: 25%;
  height: 100%;
  top: -10px;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
}
.group-34-I2238_2234 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rectangle-87-I2238_2235 {
  width: 100%;
  height: 37.5%;
  top: 0%;
  left: -100%;
  z-index: 0;
  transform: rotate(0deg) scaleX(-1);
  border-radius: 5.62px;
  background: #010101ff;
}
.rectangle-88-I2238_2236 {
  width: 100%;
  height: 54.17%;
  top: 45.83%;
  left: -100%;
  z-index: 1;
  transform: rotate(0deg) scaleX(-1);
  border-radius: 5.62px;
  background: #010101ff;
}
.join-the-waitli-22163 {
  width: 17%;
  height: 49.06%;
  top: 25.47%;
  left: 83%;
  z-index: 1;
  transform: rotate(0deg);
  text-align: right;
  line-height: 0px;
}
.join-the-waitli-22163-0 {
  font-size: calc(24 * var(--ratio));
  letter-spacing: calc(0.48 * var(--ratio));
  line-height: calc(26.40000057220459 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  color: #000000ff;
}
.nodeBg-9535,
.nodeBg-9519,
.nodeBg-9548,
.nodeBg-9522,
.nodeBg-9524,
.nodeBg-23204,
.nodeBg-23218,
.nodeBg-23222,
.nodeBg-9532,
.nodeBg-9530,
.nodeBg-9543,
.nodeBg-9528,
.nodeBg-9541,
.nodeBg-4916,
.nodeBg-9538,
.nodeBg-9545 {
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
  opacity: 1;
}
.image-22-9535 {
  width: 38.06%;
  height: 68.5%;
  top: 19.63%;
  left: -9.44%;
  z-index: 1;
  transform: rotate(0deg);
  overflow: hidden;
}
.image-17-9519 {
  width: 46.39%;
  height: 83.5%;
  top: 19.63%;
  left: 64.58%;
  z-index: 2;
  transform: rotate(0deg);
  overflow: hidden;
}
.frame-3-22166 {
  width: 50.63%;
  height: 47.75%;
  top: 34%;
  left: 24.65%;
  z-index: 4;
  transform: rotate(0deg);
}
.frame-2-22165 {
  width: 100%;
  height: 64.4%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
}
.whats-in-your-f-23167 {
  width: 100%;
  height: 64.23%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.whats-in-your-f-23167-0,
.whats-in-your-f-23167-3 {
  font-size: calc(72 * var(--ratio));
  line-height: calc(79.20000171661377 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #000000ff;
}
.whats-in-your-f-23167-1 {
  font-size: calc(72 * var(--ratio));
  line-height: calc(79.20000171661377 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  background: linear-gradient(90deg, #ffcfddff 0%, #ff5c8dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.whats-in-your-f-23167-2 {
  font-size: calc(72 * var(--ratio));
  line-height: calc(79.20000171661377 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #a43b5bff;
}
.an-app-that-sho-22164 {
  width: 94.1%;
  height: 26.02%;
  top: 73.98%;
  left: 2.95%;
  z-index: 1;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.an-app-that-sho-22164-0 {
  font-size: calc(24 * var(--ratio));
  line-height: calc(31.200000762939453 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #333333ff;
}
.button-22153-container {
  position: absolute;
  top: 85.34%;
  left: 30.8%;
  width: 38.41%;
  height: 14.66%;
  border-radius: 999px;
  background: #000;
  box-shadow: 0px 4px 13.9px 0px rgba(0, 0, 0, 0.15);
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transform: rotate(0deg);
  z-index: 1;
}
.typeprimary-siz-2287 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  padding: 0 0;
}
.button-2288 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 16px 24px;
  background: transparent;
  border-radius: 999px;
}
.button-2288-0 {
  font-family: 'SF Pro', 'Host Grotesk', 'Inter', sans-serif;
  font-size: calc(24 * var(--ratio));
  font-weight: 590;
  line-height: normal;
  background: linear-gradient(90deg, #fff -33.14%, #ff5c8d 132.54%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border: none;
  outline: none;
  text-align: center;
  width: 100%;
  display: block;
  white-space: nowrap;
}
.vector-1-9596 {
  width: 12.41%;
  height: 29.12%;
  top: 62.36%;
  left: 5.57%;
  z-index: 0;
  transform: rotate(0deg);
  overflow: hidden;
  box-sizing: border-box;
}
.image-26-9548 {
  width: 19.24%;
  height: 34.63%;
  top: 64.64%;
  left: 20.08%;
  z-index: 7;
  transform: rotate(-15deg);
  overflow: hidden;
}
.image-18-9522 {
  width: 38.61%;
  height: 69.5%;
  top: 67.75%;
  left: -11.74%;
  z-index: 6;
  transform: rotate(0deg) scaleX(-1);
  overflow: hidden;
  filter: blur(0px);
  filter: blur(0px);
}
.vector-2-9598 {
  width: 13.58%;
  height: 29.79%;
  top: 79.3%;
  left: 82.29%;
  z-index: 8;
  transform: rotate(0deg);
  overflow: hidden;
  box-sizing: border-box;
}

.vector-3038 {
  width: 1.18%;
  height: 7.5%;
  top: 88.13%;
  left: 49.38%;
  z-index: 5;
  transform: rotate(0deg);
  overflow: hidden;
}
.block--2-23182 {
  width: 100%;
  height: 33.33%;
  top: 33.33%;
  left: 0%;
  z-index: 1;
  transform: rotate(0deg);
}
.image-18-9524 {
  width: 38.61%;
  height: 69.5%;
  top: -32.25%;
  left: -11.74%;
  z-index: 5;
  transform: rotate(0deg) scaleX(-1);
  overflow: hidden;
  filter: blur(0px);
  filter: blur(0px);
}
.vector-2-95100 {
  width: 13.43%;
  height: 12.8%;
  top: -3.61%;
  left: 82.28%;
  z-index: 1;
  transform: rotate(0deg);
  overflow: hidden;
  box-sizing: border-box;
}
.frame-40-148115 {
  width: 76.07%;
  height: 74.5%;
  top: 6.38%;
  left: 11.94%;
  z-index: 4;
  transform: rotate(0deg);
}
.title-23198 {
  width: 52.13%;
  height: 34.73%;
  top: 0%;
  left: 23.94%;
  z-index: 0;
  transform: rotate(0deg);
}
.no-planning-no-stress {
  width: 100%;
  height: 20.77%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
  font-size: calc(36 * var(--ratio));
  font-family: "SF Pro", sans-serif;
  font-weight: 400;
}
.no-planning-no-stress-span {
  color: #ff5c8dff;
}
.no-planning-no-stress-span2 {
  color: #333333ff;
}
.from-fridge-cha-23188 {
  width: 100%;
  height: 67.63%;
  top: 32.37%;
  left: 0%;
  z-index: 1;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.from-fridge-cha-23188-0,
.from-fridge-cha-23188-2,
.from-fridge-cha-23188-4 {
  font-size: calc(64 * var(--ratio));

  line-height: calc(70.4000015258789 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #000000ff;
}
.from-fridge-cha-23188-1,
.from-fridge-cha-23188-3 {
  font-size: calc(64 * var(--ratio));

  line-height: calc(70.4000015258789 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #ff5c8dff;
}
.steps-23225 {
  width: 100%;
  height: 55.87%;
  top: 44.13%;
  left: 0%;
  z-index: 1;
  transform: rotate(0deg);
}
.frame-5-23200 {
  width: 29.21%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 4;
  transform: rotate(0deg);
  border-radius: 25px;
  background: #ffffffff;
  box-shadow:
    0px 2px 3px 0px rgba(0, 0, 0, 0.30000001192092896),
    0px 6px 10px 4px rgba(0, 0, 0, 0.15000000596046448);
}
.image-2-23204,
.image-23218,
.image-23222 {
  width: 45%;
  height: 43.24%;
  top: 7.21%;
  left: 27.5%;
  z-index: 0;
  transform: rotate(0deg);
  overflow: hidden;
}
.step-1-snap-you-23202,
.step-2-get-inst-23219,
.step-3-build-yo-23223 {
  width: 85%;
  height: 17.42%;
  top: 53.45%;
  left: 7.5%;
  z-index: 1;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.step-1-snap-you-23202-0,
.step-2-get-inst-23219-0,
.step-3-build-yo-23223-0 {
  font-size: calc(24 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  line-height: calc(28.8 * var(--ratio));
  color: #000;
  display: block;
  text-align: center;
  font-weight: 550;

}
.take-a-photo-of-23206,
.fridge-shows-wh-23220,
.missing-a-coupl-23224 {
  width: 85%;
  height: 18.92%;
  top: 73%;
  left: 7.5%;
  z-index: 2;
  transform: rotate(0deg);
  text-align: center;
word-wrap: break-word  
}
.take-a-photo-of-23206-0,
.fridge-shows-wh-23220-0,
.missing-a-coupl-23224-0 {
  font-size: calc(16 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  line-height: calc(22 * var(--ratio));
  color: #333333;
  display: block;
  text-align: center;
  word-wrap: break-word
  
}
.frame-6-23217 {
  width: 29.21%;
  height: 100%;
  top: 0%;
  left: 35.14%;
  z-index: 2;
  transform: rotate(0deg);
  border-radius: 25px;
  background: #ffffffff;
  box-shadow:
    0px 2px 3px 0px rgba(0, 0, 0, 0.30000001192092896),
    0px 6px 10px 4px rgba(0, 0, 0, 0.15000000596046448);
}
.frame-7-23221 {
  width: 29.21%;
  height: 100%;
  top: 0%;
  left: 70.79%;
  z-index: 0;
  transform: rotate(0deg);
  border-radius: 25px;
  background: #ffffffff;
  box-shadow:
    0px 2px 3px 0px rgba(0, 0, 0, 0.30000001192092896),
    0px 6px 10px 4px rgba(0, 0, 0, 0.15000000596046448);
}
.vector-3035 {
  width: 11.4%;
  height: 16.8%;
  top: 42.27%;
  left: 26.45%;
  z-index: 3;
  transform: rotate(-6.38deg);
  transform-origin: 23.58% -16.44%;
  overflow: hidden;
}
.vector-3037 {
  width: 11.68%;
  height: 12.92%;
  top: 44.29%;
  left: 61.79%;
  z-index: 1;
  transform: rotate(0deg);
  overflow: hidden;
}
.image-21-9532 {
  width: 30.69%;
  height: 55.25%;
  top: 8.22%;
  left: 76.09%;
  z-index: 7;
  transform: rotate(-20.66deg);
  overflow: hidden;
}
.vector-3-9595 {
  width: 9.13%;
  height: 24.75%;
  top: 54.68%;
  left: 4.71%;
  z-index: 0;
  transform: rotate(0deg);
  overflow: hidden;
  box-sizing: border-box;
}
.image-20-9530 {
  width: 26.71%;
  height: 48.07%;
  top: 67.66%;
  left: 49.81%;
  z-index: 2;
  transform: rotate(-30.77deg);
  overflow: hidden;
}
.nodeBg-3034 {
  background-position: center;
  background-repeat: no-repeat;
  width: calc(1079.75935828877 * var(--ratio));
  height: calc(1078.6380952380953 * var(--ratio));
  left: calc(-641.6142333331593 * var(--ratio));
  top: calc(-648.921000453404 * var(--ratio));
  object-fit: cover;
  opacity: 1;
}
.image-16-3034 {
  width: 27.36%;
  height: 27.63%;
  top: 68.38%;
  left: 80.63%;
  z-index: 3;
  transform: rotate(0deg);
  overflow: hidden;
}
.image-24-9543 {
  width: 45.52%;
  height: 81.94%;
  top: 70.85%;
  left: -10.09%;
  z-index: 6;
  transform: rotate(135deg);
  overflow: hidden;
}
.block--3-23230 {
  width: 100%;
  height: 33.33%;
  top: 66.67%;
  left: 0%;
  z-index: 2;
  transform: rotate(0deg);
}
.image-19-9528 {
  width: 26.71%;
  height: 48.07%;
  top: -32.34%;
  left: 49.81%;
  z-index: 4;
  transform: rotate(-30.77deg);
  overflow: hidden;
}
.image-24-9541 {
  width: 45.52%;
  height: 81.94%;
  top: -29.15%;
  left: -10.09%;
  z-index: 0;
  transform: rotate(135deg);
  overflow: hidden;
}
.image-5-4916 {
  width: 37.78%;
  height: 68%;
  top: -8.38%;
  left: 6.11%;
  z-index: 2;
  transform: rotate(41.49deg);
  overflow: hidden;
}
.frame-41-148116 {
  width: 83.75%;
  height: 89.63%;
  top: 5.13%;
  left: 7.99%;
  z-index: 3;
  transform: rotate(0deg);
}
.black-wrapper-7228 {
  width: 100%;
  height: 75.03%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
  border-radius: 25px;
  background: #000000e5;
  box-shadow:
    0px 4px 34.5px 3px rgba(12, 12, 13, 0.20000000298023224),
    0px 4px 4px -1px rgba(12, 12, 13, 0.10000000149011612);
}
.frame-33-47162 {
  width: 88.39%;
  height: 73.61%;
  top: 13.2%;
  left: 5.8%;
  z-index: 0;
  transform: rotate(0deg);
}
.frame-9-4510 {
  width: 100%;
  height: 57.58%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
}
.ready-to-stop-a-457 {
  width: 100%;
  height: 61.4%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.ready-to-stop-a-457-0,
.ready-to-stop-a-457-2 {
  font-size: calc(64 * var(--ratio));

  line-height: calc(70.4000015258789 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #d5ff5bff;
}
.ready-to-stop-a-457-1 {
  font-size: calc(64 * var(--ratio));

  line-height: calc(70.4000015258789 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  background: linear-gradient(90deg, #ffcfddff 0%, #ff5c8dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join-the-waitli-459 {
  width: 76.36%;
  height: 28.07%;
  top: 71.93%;
  left: 11.82%;
  z-index: 1;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.join-the-waitli-459-0 {
  font-size: calc(24 * var(--ratio));
  line-height: normal;
  font-family: 'Host Grotesk', sans-serif;
  font-style: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #CDCDCD;
}
.frame-32-47161 {
  width: 35.18%;
  height: 32.32%;
  top: 67.68%;
  left: 32.41%;
  z-index: 1;
  transform: rotate(0deg);
}
.text-input-47115 {
  padding: 0 calc(24 * var(--ratio));
  box-sizing: border-box;
  font-size: calc(20 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  width: 100%;
  height: 37.5%;
  top: 0%;
  left: 0%;
  z-index: 0;
  position: absolute;
  transform: rotate(0deg);
  overflow: hidden;
  background: #ffffffff;
  border: 2px solid #f0ffd8ff;
  box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.05),
    0px 4px 4px -1px rgba(12, 12, 13, 0.1);
  border-radius: 999px;
}
.text-input-47115.error {
  border-color: #ff0e57;
}
.error-icon {
  position: absolute;
  top: 0;
  right: calc(12 * var(--ratio));
  height: 37.5%;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
}
.error-icon img {
  width: calc(28 * var(--ratio));
  height: calc(28 * var(--ratio));
}
.frame-27-I47115_4762 {
  width: 87.2%;
  height: 62.5%;
  top: 18.75%;
  left: 6.4%;
  z-index: 0;
  transform: rotate(0deg);
}
.enter-your-emai-I47115_4763 {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
  text-align: left;
  line-height: 0px;
}
.enter-your-emai-I47115_4763-0 {
  font-size: calc(20 * var(--ratio));
  line-height: calc(30 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #777777ff;
}
.button-47151-container {
  width: 100%;
  height: 43.75%;
  top: 56.25%;
  left: 0%;
  z-index: 1;
  transform: rotate(0deg);
  border-radius: 999px;
  background: #000000ff;
  box-sizing: border-box;
  border: 1px solid var(--color-accent-secondary, #FF5C8D);
  box-shadow: 0px 4px 13.899999618530273px 0px
    rgba(0, 0, 0, 0.15000000596046448);
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame-39-51141 {
  width: 52.74%;
  height: 20.08%;
  top: 79.92%;
  left: 23.63%;
  z-index: 1;
  transform: rotate(0deg);
}
.frame-38-51140 {
  width: 30.19%;
  height: 33.33%;
  top: 0%;
  left: 34.91%;
  z-index: 0;
  transform: rotate(0deg);
}
.frame-35-51130 {
  width: 25%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 0;
  transform: rotate(0deg);
  overflow: hidden;
  border-radius: 50px;
}
.frame-35-51130 a {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}
.frame-35-51130 a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
.frame-36-51134 {
  width: 25%;
  height: 100%;
  top: 0%;
  left: 37.5%;
  z-index: 1;
  transform: rotate(0deg);
  overflow: hidden;
  border-radius: 50px;
}
.frame-36-51134 a {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}
.frame-36-51134 a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
.frame-37-51137 {
  width: 25%;
  height: 100%;
  top: 0%;
  left: 75%;
  z-index: 2;
  transform: rotate(0deg);
  overflow: hidden;
  border-radius: 50px;
}
.frame-37-51137 a {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}
.frame-37-51137 a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
.frame-34-51127 {
  width: 100%;
  height: 55.56%;
  top: 44.44%;
  left: 0%;
  z-index: 1;
  transform: rotate(0deg);
}
.follow-our-jour-51126 {
  width: 52.83%;
  height: 50%;
  top: 0%;
  left: 23.58%;
  z-index: 0;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.follow-our-jour-51126-0 {
  font-size: calc(36 * var(--ratio));

  line-height: calc(39.600000858306885 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 600;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #ff5c8dff;
}
.fridge-is-built-51125 {
  width: 100%;
  height: 20%;
  top: 72.5%;
  left: 0%;
  opacity: 0.69;
  z-index: 1;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.fridge-is-built-51125-0 {
  font-size: calc(20 * var(--ratio));

  line-height: calc(22.000000476837158 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #333333ff;
}
.year-desktop-2025 {
  width: 100%;
  height: 5%;
  top: 110%;
  left: 0%;
  z-index: 2;
  transform: rotate(0deg);
  text-align: center;
  line-height: 0px;
}
.year-desktop-2025-0 {
  font-size: calc(12 * var(--ratio));

  line-height: calc(13.2 * var(--ratio));

  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;

  text-decoration: none;
  text-transform: none;
  white-space: pre-wrap;
  color: #333333ff;
  opacity: 0.5;
}
.image-23-9538 {
  width: 49.38%;
  height: 88.88%;
  top: 21.19%;
  left: 68.93%;
  z-index: 1;
  transform: rotate(16.55deg);
  overflow: hidden;
}
.image-25-9545 {
  width: 27.92%;
  height: 50.25%;
  top: 50.32%;
  left: -8.02%;
  z-index: 5;
  transform: rotate(150deg);
  overflow: hidden;
}

/* Стили для кнопок "Join the waitlist" */
.button-2288,
.button-47151-container {
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
  user-select: none;
}

.button-2288:hover,
.button-47151-container:hover {
  transform: scale(1.02);
}

.button-2288:active,
.button-47151-container:active {
  transform: scale(0.98);
}

/* Стили для сообщения об успешной подписке */
.success-wrapper {
  width: 100%;
  height: 75.03%;
  top: 0%;
  left: 0%;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0px 4px 34.5px 3px rgba(12, 12, 13, 0.2);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: none;
}

.success-wrapper.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.success-icon {
  font-size: calc(64 * var(--ratio));
  line-height: 1.1;
}

.success-title {
  color: #d5ff5b;
  font-size: calc(64 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.1;
}

.success-subtitle {
  color: #cdcdcd;
  font-size: calc(24 * var(--ratio));
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin-top: calc(14 * var(--ratio));
}

.step-card {
  background: #fff;
  border-radius: 25px;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 29.21%;
  height: 100%;
  min-width: 0;
}
.step-card__img {
  width: 144px;
  height: 144px;
  object-fit: contain;
}
.step-card__title {
  color: #000;
  font-size: 24px;
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  line-height: 28.8px;
}
.step-card__desc {
  color: #000;
  font-size: 16px;
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  line-height: 22px;
}

.mobile-message {
  display: none;
  font-size: 24px;
  text-align: center;
  padding-top: 50px;
}

.mobile-view {
  display: none;
}

@media (max-width: 768px) {
  .parent-div {
    display: none;
  }
  .mobile-view {
    display: block;
  }
  .landing-2,
  .landing-2 * {
    box-sizing: border-box;
  }
  .landing-2 {
    background: var(--color-accent-primary, #d4ff00);
    min-height: 2600px;
    position: relative;
    width: 100%;
    overflow-x: hidden;
  }
  .frame-3 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 398px;
    width: 90%;
  }
  .frame-2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .what-s-in-your-fridge-we-ll-figure-it-out {
    text-align: center;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 30px;
    line-height: 110%;
    font-weight: 700;
    position: relative;
  }
  .what-s-in-your-fridge-we-ll-figure-it-out-span {
    color: #000000;
  }
  .what-s-in-your-fridge-we-ll-figure-it-out-span2 {
    background: var(--gradient-1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .what-s-in-your-fridge-we-ll-figure-it-out-span3 {
    color: #a43b5b;
  }
  .an-app-that-shows-what-to-cook-from-what-you-already-have-just-snap-a-photo {
    color: #333333;
    text-align: center;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    width: 273px;
  }
  .button {
    background: var(--text-primary);
    border-radius: 28px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-width: 280px;
    position: relative;
    box-shadow: 0px 4px 13.9px 0px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);
  }
  
  .button:active {
    transform: translateY(0px);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  }
  
  .button2 {
    background: var(--gradient-1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'SF Pro', 'Host Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 600;
  }
  .logo {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 29px;
    height: 27px;
  }
  .group-34 {
    width: 24px;
    height: 27px;
    position: relative;
  }
  .rectangle-87 {
    background: #010101;
    border-radius: 4.24px;
    width: 100%;
    height: 12.2px;
    position: absolute;
    top: 0;
  }
  .rectangle-88 {
    background: #010101;
    border-radius: 4.24px;
    width: 100%;
    height: 17.62px;
    position: absolute;
    bottom: 0;
  }
  .fridge {
    color: #010101;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
  }
  .frame-40 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 790px;
    width: 90%;
  }
  .title {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .no-planning-no-stress {
    text-align: center;
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
  }
  .no-planning-no-stress-span {
    color: var(--color-accent-secondary);
  }
  .no-planning-no-stress-span2 {
    color: #333333;
  }
  .from-fridge-chaos-to-dinner-in-3-steps {
    text-align: center;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 30px;
    line-height: 110%;
    font-weight: 700;
  }
  .from-fridge-chaos-to-dinner-in-3-steps-span {
    color: #000000;
  }
  .from-fridge-chaos-to-dinner-in-3-steps-span2 {
    color: var(--color-accent-secondary);
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .frame-5,
  .frame-6,
  .frame-7 {
    background: var(--color-bg-primary);
    border-radius: 25px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 320px;
    box-shadow: var(--m3-elevation-light-4-box-shadow);
  }
  
  .frame-8 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
  }
  
  .frame-8 .black-wrapper {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 25px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-shadow: 0px 4px 34.5px 3px rgba(12, 12, 13, 0.2),
      0px 4px 4px -1px rgba(12, 12, 13, 0.1);
    position: relative;
    /* Фиксируем минимальную высоту чтобы не было прыжков */
    min-height: 400px;
  }
  
  .frame-8 .frame-33 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* Убираем позиционирование чтобы не влиять на высоту */
    position: relative;
    width: 100%;
    flex: 1;
    justify-content: center;
  }
  .image-2,
  .image {
    width: 144px;
    height: 144px;
    object-fit: cover;
  }
  
  .step-1-snap-your-fridge,
  .step-2-get-instant-recipe-ideas,
  .step-3-build-your-shopping-list {
    color: #000000;
    text-align: center;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 24px;
    line-height: 120%;
    font-weight: 700;
    align-self: stretch;
  }
  .take-a-photo-of-what-s-inside-no-need-to-list-ingredients-manually,
  .fridge-shows-what-you-can-cook-right-now-simple-fast-surprisingly-good,
  .missing-a-couple-things-fridge-adds-them-to-your-cart-in-one-tap {
    color: #333333;
    text-align: center;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 400;
    align-self: stretch;
  }
  
  .frame-8 .frame-9 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    align-self: stretch;
  }
  
  .frame-8 .ready-to-stop-asking-what-s-for-dinner-every-night {
    text-align: center;
    font-family: 'Host Grotesk';
    font-size: 30px;
    line-height: 110%;
    font-weight: 600;
    align-self: stretch;
  }
  
  .frame-8 .ready-to-stop-asking-what-s-for-dinner-every-night-span {
    color: #d5ff5b;
  }
  
  .frame-8 .ready-to-stop-asking-what-s-for-dinner-every-night-span2 {
    background: var(--gradient-1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .frame-8 .join-the-waitlist-and-get-early-access-to-fridge-you-ll-also-receive-our-first-smart-recipes-and-exclusive-updates {
    font-size: 16px;
    font-family: "Host Grotesk", sans-serif;
    font-weight: 400;
    color: rgba(160, 160, 160, 1);
    width: 280px;
    height: 63px;
    text-align: center;
    margin: 0 auto;
  }
  
  .frame-8 .frame-32 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    width: 281.25px;
  }
  
  .frame-8 .text-input {
    background: var(--color-bg-primary);
    border-radius: 18.75px;
    border: 1.5px solid var(--color-chip-bg);
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0px 3px 3px -0.75px rgba(12, 12, 13, 0.05),
      0px 3px 3px -0.75px rgba(12, 12, 13, 0.1);
    cursor: text;
    transition: border-color 0.3s ease, color 0.3s ease;
    font-family: 'Host Grotesk', sans-serif;
    font-size: 15px;
    line-height: 150%;
    color: var(--text-secondary);
  }
  
  .frame-8 .text-input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    color: var(--text-primary);
  }
  
  .frame-8 .text-input.error {
    border-color: var(--color-error);
  }
  
  .frame-8 .text-input::placeholder {
    color: var(--text-secondary);
  }
  
  .frame-8 .button3 {
    background: var(--text-primary);
    border-radius: 21px;
    border: 0.75px solid var(--color-accent-secondary);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    box-shadow: 0px 3px 10.42px 0px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .frame-8 .button3:hover {
    transform: translateY(-1px);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.2);
  }
  
  .frame-8 .button3:active {
    transform: translateY(0px);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  }
  
  .frame-8 .button2 {
    color: var(--color-bg-primary);
    font-family: 'Host Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }
  
  /* Новая форма успеха для мобильной версии */
  .mobile-success-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 32px 16px;
    background: transparent !important; /* Убираем фон так как он уже есть у родителя */
    border-radius: 25px;
    display: none; /* Изначально скрыта */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
    z-index: 15;
    /* Убираем min-height чтобы не влиять на высоту */
  }
  
  .mobile-success-new.visible {
    display: flex;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  
  .mobile-success-emoji {
    text-align: center;
    font-size: 64px;
    line-height: 1.1;
    margin-bottom: 0;
    margin-top: 20px; /* Опускаем эмодзи ближе к тексту */
  }
  
  .mobile-success-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 280px;
    flex: 1;
  }
  
  .mobile-success-header {
    text-align: center;
    color: #d5ff5b;
    font-size: 30px;
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 700;
    line-height: 33px;
    width: 100%;
    margin: 0;
  }
  
  .mobile-success-text {
    text-align: center;
    color: #cdcdcd;
    font-size: 16px;
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 400;
    opacity: 0.69;
    width: 100%;
    line-height: 1.4;
    margin: 0;
  }
  

  .vector {
    width: 17px;
    height: 60px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 685px;
  }
  .frame-42 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 320px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2400px;
  }

  .frame-39 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .frame-38 {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .frame-35,
  .frame-36,
  .frame-37 {
    border-radius: 50px;
    width: 33px;
    height: 33px;
  }
  .frame-38 a {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
  }
  .frame-38 a:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  .frame-34 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .follow-our-journey {
    font-size: 24px;
    font-family: "Host Grotesk", sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    width: 256px;
    height: 26px;
    text-align: center;
  }
  .fridge-is-built-by-two-hungry-humans-trying-to-fix-dinner {
    font-size: 18px;
    font-family: "Host Grotesk";
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    width: 256px;
    height: 40px;
    text-align: center;
  }
  .year-2025 {
    font-size: 8px;
    font-family: "Host Grotesk";
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    width: 256px;
    height: 9px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 100px;
    opacity: 0.5;
  }
  .frame-43 {
    width: 306px;
    height: 292px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    background: var(--color-accent-primary, #d4ff00);
  }
  .ellipse-1 {
    background: rgba(12, 12, 13, 0.1);
    border-radius: 50%;
    width: 177px;
    height: 49px;
    position: absolute;
    left: 51px;
    top: 243.48px;
    transform: rotate(-6.969deg);
    filter: blur(7.55px);
  }
  .image-14 {
    width: 281px;
    height: 281px;
    position: absolute;
    left: 12px;
    top: 5px;
    object-fit: cover;
  }


  .mobile-logo-img {
    height: 27px;
    width: auto;
    display: block;
    margin-right: 8px;
  }
}



.step-card {
  background: #fff;
  border-radius: 25px;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 29.21%;
  height: 100%;
  min-width: 0;
}
.step-card__img {
  width: 144px;
  height: 144px;
  object-fit: contain;
}
.step-card__title {
  color: #000;
  font-size: 24px;
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  line-height: 28.8px;
}
.step-card__desc {
  color: #000;
  font-size: 16px;
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  line-height: 22px;
}



/* Исправление проблем с прокруткой на мобильных устройствах */
@media (max-width: 768px) {
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  .mobile-view {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  .landing-2 {
    /* Убираем фиксированную высоту для правильного скролла */
    min-height: auto;
    height: auto;
    /* Делаем flexbox для управления порядком элементов */
    display: flex;
    flex-direction: column;
  }
  
  /* Преобразуем основные блоки из absolute в relative с точными отступами */
  .logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 29px;
    margin-bottom: 0;
    /* Ставим логотип первым */
    order: 1;
  }
  
  .frame-43 {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0;
    margin-top: 20px; /* Уменьшаем отступ от логотипа */
    margin-bottom: 0;
    /* Ставим холодильник вторым */
    order: 2;
  }
  
  .frame-3 {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0;
    margin-top: 6px; /* Небольшой отступ от холодильника */
    margin-bottom: 0;
    /* Ставим заголовок третьим */
    order: 3;
  }
  
  .vector {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0;
    margin-top: 40px; /* Уменьшаем отступ от заголовка */
    margin-bottom: 0;
    /* Ставим вектор четвертым */
    order: 4;
  }
  
  .frame-40 {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0;
    margin-top: 45px; /* 790px - 685px - 60px = 45px */
    margin-bottom: 0;
    /* Ставим контент пятым */
    order: 5;
  }
  
  .frame-42 {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0;
    margin-top: 50px; /* Делаем футер близко к контенту */
    margin-bottom: 25px; /* Уменьшаем пустое пространство снизу вдвое */
    /* Ставим футер последним */
    order: 6;
  }
}