/* ===== Two Pane Hero (minimal) ===== */

.hero-first-panel{
  place-items:center;
  width:100%;
  display:grid;
  position:relative;
}

.hero-first-panel:before{
  --grid-size:50px;
  --grid-strength:1px;
  --grid-dash:1px;
  --grid-gap:5px;
  --grid-color:#414550b3;
  --paper-color:#141624;
  content:"";
  width:100%;
  max-width:1440px;
  height:80vh;
  position:absolute;
  background-color: var(--dynamic-overlay, transparent);
  background-size:var(--grid-gap) var(--grid-gap), var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to bottom,transparent var(--grid-dash),var(--dynamic-overlay, transparent) var(--grid-dash)),
    linear-gradient(to right,var(--grid-color) var(--grid-strength),transparent var(--grid-strength)),
    linear-gradient(to right,transparent var(--grid-dash),var(--dynamic-overlay, transparent) var(--grid-dash)),
    linear-gradient(to bottom,var(--grid-color) var(--grid-strength),transparent var(--grid-strength));
}

@media (min-width:768px){
  .hero-first-panel:before{ width:80vw; }
}

.photo-grid-layer{
  z-index:10;
  pointer-events:none;
  grid-row-start:1;
  grid-column-start:1;
  width:calc(100% + 40px);
  max-width:1540px;
  height:100%;
  display:grid;
  position:relative;
}

.text-layer{
  width:100%;
  max-width:1440px;
  height:calc(100vh - var(--header-height));
  flex-direction:column;
  grid-row-start:1;
  grid-column-start:1;
  justify-content:center;
  align-items:center;
  display:flex;
}

@media (min-width:768px){
  .text-layer{ height:calc(110vh - var(--header-height)); }
}

.hero-text-container{
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:90%;
  display:flex;
}

@media (min-width:768px){ .hero-text-container{ max-width:76%; } }
@media (min-width:1024px){ .hero-text-container{ max-width:70%; } }

/* Your original CSS hides these; JS reveals them */
.parallax-image{
  --width:300;
  opacity:0;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  width:clamp(calc(var(--width)*.45px),calc((var(--width)/1540)*100vw),calc(var(--width)*1px));
  border-radius:.375rem;
  grid-row-start:1;
  grid-column-start:1;
  position:absolute;
  transform:scale(.8);
  box-shadow:0 0 254px #000000b2;
}

.parallax-image.productcard{ --width:250; top:20px; left:-10px; }
@media (min-width:1200px){ .parallax-image.productcard{ top:48px; } }

.parallax-image.cart-card{ --width:278; bottom:-50px; right:0; }
@media (min-width:900px){ .parallax-image.cart-card{ bottom:0; right:5rem; } }

.parallax-image.uidots{ --width:328; top:80px; left:2.5rem; }
@media (min-width:900px){ .parallax-image.uidots{ left:5rem; } }
@media (min-width:1600px){ .parallax-image.uidots{ top:140px; } }

.parallax-image.products{ --width:556; top:20px; right:-5rem; }
@media (min-width:900px){ .parallax-image.products{ right:0; } }
@media (min-width:1600px){ .parallax-image.products{ top:25px; } }

.parallax-image.uipanel{ --width:376; bottom:-52px; left:0; }
@media (min-width:900px){ .parallax-image.uipanel{ bottom:-24px; left:5rem; } }

.text-outline{
  pointer-events:none;
  opacity:0;
  background-color:#ffffff12;
  border-width:2px;
  border-top-right-radius:.375rem;
  border-bottom-right-radius:.375rem;
  border-bottom-left-radius:.375rem;
  position:absolute;
  top:0;
  left:0;
}

.text-outline-tab{
  border-top-left-radius:.375rem;
  border-top-right-radius:.375rem;
  justify-content:center;
  align-items:center;
  height:24px;
  padding-left:.5rem;
  padding-right:.5rem;
  font-size:10px;
  display:flex;
  position:absolute;
  top:-24px;
  left:-2px;
}

.text-eyebrow .text-eyebrow-light-text{ color:#c4bffc; }

.hero-button-container{ opacity:0; }

.hero-second-panel{
  width:100%;
  max-width:1440px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin:auto;
  display:flex;
}
.hero-second-panel2{
  padding-top:var(--space-4xl);
}

.video-text-container{
  text-align:center;
  z-index:10;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:90%;
  
  display:flex;
}
.video-text-container2{
padding-top:2.5rem;
}
@media (min-width:768px){
  .video-text-container{ max-width:76%;  }
  .video-text-container2{
padding-top: 4rem;
}
}

.video-container{ width:100%; height:100%; margin-top:2.5rem; }
@media (min-width:768px){ .video-container{ margin-top:4rem; } }

.website-builder-richtext-paragraph a{
  color:inherit;
  text-underline-offset:.25rem;
  text-decoration:underline;
  transition-property:color;
  transition-duration:.15s;
  transition-timing-function:cubic-bezier(.4,0,2,1);
}
.website-builder-richtext-paragraph a:hover{
  color:#fff;
  font-weight:inherit !important;
  text-decoration:underline !important;
}

.two-pane-subhead{
  font-size: 1.9rem !important;
}

.two-pane-footnoote{
  font-size: .8rem !important;
}
.two-pane-second-title{
  font-size: 3.5rem !important;
  font-weight: 400 !important;
}
.two-pane-rich *{
  font-size: 1.8rem;
  line-height: 1.2;
}
.hero-second-panel-wrapper{
  width: 100vw;

}

@media (max-width:768px){
  .two-pane-subhead{
    font-size: 1.2rem !important;
  }
  .two-pane-second-title{
  font-size: 2.5rem !important;
}
  .two-pane-rich *{
  font-size: 1.4rem;
}
}