/* Scroll-driven sticky scale grid (cloned from Kope "Sticky Images" IX2 action a-58).
   Scroll progress through 300svh wrapper drives each cell from 100vw/100vh down to 32.7vw/33.33vh,
   revealing a 3x3 grid. */

.scale-grid-section {
  background-color: var(--base-ananya, #fbfbfb);
  padding-bottom: 6rem;
  /* The preceding #the-interor section uses .full-image-wrapper which is
     position: sticky; z-index: 1 — without our own stacking context it would
     paint over the entire scale-grid scroll. Lift above it. */
  position: relative;
  z-index: 2;
}

.scale-grid-section .sticky-wrapper {
  width: 100%;
  height: 300svh;
  position: relative;
  overflow: clip;
  z-index: 2;
}

.scale-grid-section .sticky-images {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.scale-grid-section .scale-grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  align-self: center;
  position: relative;
  gap: 1rem;
}

.scale-grid-section .scale-grid-images {
  flex: none;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.scale-grid-section .scale-grid-images > img,
.scale-grid-section .scale-grid-images > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When _3-image-wrap is reused as a FlipStack mount, override Webflow's
   3-column grid so the React section spans the full width and centers. */
._3-image-wrap[data-stack-room] {
  display: block !important;
  width: 100% !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

._3-image-wrap[data-stack-room] > section {
  width: 100%;
  margin: 0 auto;
}

/* -----------------------------------------------------------------
   Responsive navbar overrides.
   - Floating navbar pill 15% smaller (height 34px, padding 8.5px).
   - Nav-text font size reduced 30% (clamp 7-10px).
   - Logo kept at its Webflow-native width/height so it actually renders.
   ----------------------------------------------------------------- */

/* Logo sizes. SVG aspect is ~5:1, so we cap with an explicit small width
   and let height auto-derive — that way it never spills across the nav items. */
.image-logo {
  width: 110px !important;
  height: auto !important;
  max-height: 30px !important;
}

.image-3 {
  width: 80px !important;
  height: auto !important;
  max-height: 22px !important;
}

/* Make sure the brand wrapper doesn't stretch the logo. */
.navbar-brand,
.navbar-brand.in-floatin-menu {
  flex: 0 0 auto !important;
}

/* Floating pill (the bottom navbar) — shrink 15%. */
.navbar-wrapper-bottom {
  height: 34px !important;
  padding: 8px !important;
}

/* Nav links: tighter padding to match the smaller pill. */
.main-nav-link {
  padding-left: clamp(6px, 1.1vw, 14px) !important;
  padding-right: clamp(6px, 1.1vw, 14px) !important;
}

/* Nav text 30% smaller than before (was clamp 10-14, now 7-10). */
.main-nav-link .nav-text,
.main-nav-link .nav-text.off {
  font-size: clamp(7px, 0.74vw, 10px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Keep Webflow's overflow mask hiding the .nav-text.off slide-up duplicate;
   make the height fluid so it tracks the new clamp font-size. */
.text-wrapper {
  height: 1.4em !important;
  font-size: clamp(7px, 0.74vw, 10px) !important;
  overflow: hidden;
}

/* Tighten further at narrow widths so labels still fit. */
@media (max-width: 1100px) {
  .navbar-wrapper-bottom .main-nav-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

@media (max-width: 880px) {
  .navbar-wrapper-bottom .vertical-line-nav {
    display: none;
  }
}

/* -----------------------------------------------------------------
   Founders' Edition mid-section — make the heading + body fit
   without scrolling on a single screen height.
   ----------------------------------------------------------------- */

/* Founders' mid-section — heading + paragraph fill the full column width
   to the right, no narrow line-length constraint. */
#Founders-edition---First-name {
  width: 100% !important;
  max-width: none !important;
}

#Founders-edition---First-name .heading-regular {
  font-size: clamp(1.2rem, 1.8vw, 1.8rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.5rem !important;
}

#Founders-edition---First-name .secondary-paragraph,
#Founders-edition---First-name .secondary-paragraph.smaller {
  font-size: clamp(0.78rem, 0.85vw, 0.92rem) !important;
  line-height: 1.5 !important;
  max-width: none !important;
  width: 100%;
}

/* The .price span was inheriting a larger size that caused mid-word breaks
   ("White-/glove"). Force it inline at the same size as the surrounding text. */
#Founders-edition---First-name .secondary-paragraph .price {
  font-size: inherit !important;
  font-weight: 500;
  white-space: normal;
}

/* -----------------------------------------------------------------
   Upgrades section (Core Systems / Dirty Dancing tabs) — 20% smaller
   text across tab labels, product titles, descriptions and prices.
   ----------------------------------------------------------------- */

.w-tabs .tab-headline {
  font-size: 17.6px !important;   /* 22 → -20% */
  line-height: 1.25 !important;
}

.w-tabs .heading-small {
  font-size: 17.6px !important;   /* 22 → -20% */
  line-height: 1.4 !important;
}

.w-tabs .main-paragraph,
.w-tabs .main-paragraph.mobile-small {
  font-size: 14.4px !important;   /* 18 → -20% */
  line-height: 1.5 !important;
}

.w-tabs .price {
  font-size: 15.2px !important;   /* 19 → -20% */
}

/* Tighten the row spacing in proportion. */
.w-tabs .simple-grid.list {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

/* -----------------------------------------------------------------
   Top open-pages overlay (Subscribe + Founders side panel) —
   text + inputs 20% smaller, padding unified across both blocks.
   ----------------------------------------------------------------- */

.open-pages-wrapper .heading-regular {
  font-size: clamp(1.2rem, 1.7vw, 1.75rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.5rem !important;
}

.open-pages-wrapper .secondary-paragraph,
.open-pages-wrapper .secondary-paragraph.smaller {
  font-size: clamp(0.78rem, 0.85vw, 0.92rem) !important;
  line-height: 1.5 !important;
  max-width: none !important;
}

.open-pages-wrapper .main-input {
  font-size: 0.82rem !important;
  padding-top: 0.42rem !important;
  padding-bottom: 0.42rem !important;
  margin-top: 0.35rem !important;
}

.open-pages-wrapper .main-input::placeholder {
  font-size: 0.78rem !important;
}

.open-pages-wrapper .submit-button {
  margin-top: 0.5rem !important;
}

.open-pages-wrapper .div-block-6 {
  gap: 0.5rem !important;
}

/* Unified padding around every grid block in the overlay so the two
   sections (Subscribe + Founders) share the same rhythm. */
.open-pages-wrapper .grid.odmik {
  margin-top: 0 !important;
  padding: 1.75rem 0 !important;
}

.open-pages-wrapper .padding-bottom-medium,
.open-pages-wrapper .padding-bottom-xsmall,
.open-pages-wrapper .content-wrapper.padding-bottom-medium {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.open-pages-wrapper .content-wrapper.margin-bottom-xsmall {
  margin-bottom: 0.6rem !important;
}

.open-pages-wrapper .container.page {
  padding: 1.5rem 1.5rem !important;
}

#Founders-edition---First-name .content-wrapper.margin-bottom-xsmall {
  margin-bottom: 0.75rem !important;
}

#Founders-edition---First-name .main-input {
  margin-top: 0.35rem !important;
  padding-top: 0.42rem !important;
  padding-bottom: 0.42rem !important;
  font-size: 0.82rem !important;
}

#Founders-edition---First-name .main-input::placeholder {
  font-size: 0.78rem !important;
}

#Founders-edition---First-name .main-input.field {
  min-height: 4.5rem !important;
  font-size: 0.78rem !important;
}

#Founders-edition---First-name .div-block-6 {
  gap: 0.5rem !important;
}

#Founders-edition---First-name .submit-button {
  margin-top: 0.5rem !important;
}

/* -----------------------------------------------------------------
   MOBILE AUDIT — make everything I added behave on phones.
   ----------------------------------------------------------------- */

@media (max-width: 767px) {

  /* FlipStack: shrink the section's vertical padding + make cards a bit
     shorter so they don't push the page down. */
  ._3-image-wrap[data-stack-room] > section {
    padding: 3rem 0.5rem 4rem !important;
  }

  ._3-image-wrap[data-stack-room] .img-stack-stage {
    height: 48vh !important;
  }

  ._3-image-wrap[data-stack-room] .img-stack-cta {
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    padding: 0.6rem 1rem !important;
    gap: 0.7rem !important;
    text-align: center;
  }

  /* Scale-grid: shrink the section's bottom padding on mobile. */
  .scale-grid-section {
    padding-bottom: 3rem !important;
  }

  /* Founders' mid-section: tighter still on phones (another 25% off). */
  #Founders-edition---First-name .heading-regular {
    font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
  }
  #Founders-edition---First-name .secondary-paragraph,
  #Founders-edition---First-name .secondary-paragraph.smaller {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
  }
  #Founders-edition---First-name .main-input {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 0.75rem !important;
  }
  #Founders-edition---First-name .main-input.field {
    min-height: 3.5rem !important;
  }
  /* Stack the name + surname pair on small screens. */
  .div-block-6 {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 0.4rem !important;
  }
}