#pageContainer {
  max-width: 1920px;
  margin-inline: auto;
}


.wrap {
  height: 90vh; width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
}



.wrap {
  --grid-small-size: 18px;
  --grid-large-size: 108px;
  --grid-small-color: rgba(0, 0, 0, 0.04);
  --grid-large-color: rgba(0, 0, 0, 0.06);
  --grid-bg: #fff;
  --grid-fade-height: 5em; /* tune to match/search bar height */

  background-color: var(--grid-bg);

  /* 5 layers total; first is the fade */
  background-image:
    linear-gradient(to bottom, var(--grid-bg) 0%, transparent 100%),
    linear-gradient(to right,  var(--grid-small-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-small-color) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-large-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-large-color) 1px, transparent 1px);

  /* Size only the fade to the top strip height; grids tile normally */
  background-size:
    100% var(--grid-fade-height),
    var(--grid-small-size) var(--grid-small-size),
    var(--grid-small-size) var(--grid-small-size),
    var(--grid-large-size) var(--grid-large-size),
    var(--grid-large-size) var(--grid-large-size);

  background-position:
    top left,
    top left, top left, top left, top left;

  background-repeat:
    no-repeat, /* fade */
    repeat, repeat, repeat, repeat;

  transition: background-color 160ms ease, opacity 160ms ease;
}



.hero {
  margin-left: auto;
  padding-left: 3vmin;
  max-width: 50ch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero h1 {
  font-family: montserratBold;
  font-size: 3.75vmin;
  font-size: calc(20.1562px + 3vmin);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  max-width: 24ch;
  color: rgb(82, 82, 82);
}



.hero p {
  font-family: montserratLight;
  font-family: "montserratMedium";
  font-size: 1.125em;
  line-height: 1.6;
  max-width: 60ch;
  color: rgb(110, 110, 110);
  letter-spacing: 0.04em ;
  margin-block-end: 1.3em;

}

.ctaRow {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  width: 100%;
}

.signupButton,
.tryButton {
  font-size: 1em;
  cursor: pointer;
  border-radius: 999px; 
  padding: 0.5em 0.7em;

}

.signupButton {
  border: 0;
  background: var(--orange-color);
  color: #fff;
  transition: 0.2s;
  font-family: "montserratMedium";

}

.signupButton:hover { 
  box-shadow: 0 8px 20px #0002; 
  transform: scale(1.1);
}


.tryButton {
  font-family: "montserratMedium";
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  padding: 0.5em 0.7em;
  background: #fff;
  color: #909090;
  border: 2px solid #d6d4d4;
  flex: 1 1 auto;
  cursor: text;
}

.tryButton .icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
}


.tryButton::after {
  content: "";
  position: absolute;
  left: calc(0.7em + 1.25em + 0.625em);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1.4em;
  background: #999898;
  opacity: .35;
  pointer-events: none;
  animation: idleCaretBlink 1.05s steps(1, end) infinite;
}

@keyframes idleCaretBlink {
  0%, 50% { opacity: .35; }
  50.01%, 100% { opacity: 0; }
}







/* The stage scales as a unit; everything inside uses % of this box */
.showcase {
  margin: auto 0 auto 0;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 10;      /* 720 : 800 */
  overflow: hidden;
}

.desktop {
  background-image: url("../assets/desktop.png");
  filter: blur(0px);
}

.mobile {
  background-image: url("../assets/mobile.png");
  filter: blur(0px);
}




/* DESKTOP mockup */
.desktop {
  position: absolute;
  width: 83.333%;            /* 600 / 720 */
  aspect-ratio: 6 / 5;       /* 600 × 500 */
  top: 18.75%;               /* 150 / 800 */
  right: -8.333%;            /* -60 / 720 (negative to hang off the edge) */
  background: #ddd;
  border-radius: 6px;
  background-image: url("../assets/desktop.png");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 8px 20px #0002;
}

/* MOBILE mockup */
.mobile {
  position: absolute;
  width: 33.333%;            /* 240 / 720 */
  aspect-ratio: 9 / 18;      /* same as before (1:2) */
  top: 25.5%;                /* (168 + 36) / 800 -> folded in the translateY */
  left: 2.778%;              /* 20 / 720 */
  background: #bbb;
  border-radius: 32px;
  border: 3px solid #d6d3d3;
  z-index: 2;
  background-image: url("../assets/mobile.png");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 8px 20px #0002;
}



@media screen and (max-width: 1023px){
  .showcase {
    display: none;
  }

  .wrap {
    display: flex;
    justify-content: center;
    height: 90vh;
    background-image: none;

  }

  .hero {
    margin: 10vmin 5vmin;
  }

  .hero h1 {
    font-size: 2rem;
  }





}