#main > div > .framer-1ogd5m3,
#main > div > .framer-1r1kvna {
  display: none !important;
}

/* Stats section: lead with the illustration, percentages follow below it. */
.framer-ibggxr > .framer-1785y7l {
  order: -1;
}

/* No hover state on the "You have other options" rows. The component's only
   hover effect is dimming every non-hovered row's label and copy to 0.5 opacity
   (Active vs Inactive variants are otherwise identical — same colour, weight,
   size, border). Pinning both wrappers to full opacity makes the two variants
   render the same, so hovering changes nothing. Done visually rather than with
   pointer-events: none, which would also kill text selection and focus.
   !important is required to beat Framer's inline style. */
.framer-j32men .framer-13qqr5e .framer-iizufj,
.framer-j32men .framer-13qqr5e .framer-uqvkh9 {
  opacity: 1 !important;
}

/* "You have other options" rows: put the label and its description side by side
   (label left, copy right) instead of stacked. Only the row's inner heading
   group changes direction — the row itself, its divider and its variant states
   are untouched. Stays stacked on mobile, where two columns would be too tight. */
@media (min-width: 810px) {
  .framer-j32men .framer-13qqr5e .framer-1p3j6xp {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }

  .framer-j32men .framer-13qqr5e .framer-iizufj {
    flex: 0 0 40%;
    width: auto;
  }

  .framer-j32men .framer-13qqr5e .framer-uqvkh9 {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
}

/* The "It mattered because code felt out of reach…" paragraph sits inside a
   container whose Framer entrance animation never finishes, stranding an inline
   opacity around 0.63-0.73 (a different value each load, with no animation left
   running). That composites over the text and made the paragraph read grey next
   to its neighbours. !important is required to beat the inline style. */
.framer-1ruryj4-container {
  opacity: 1 !important;
}

/* "Webflow" inline lockup.
   The nested heading uses Framer style preset 1oksrk, which has its own
   responsive scale (40/32/26px) that diverges from the surrounding h1's
   (40/30/22px). They agree at desktop but not below it, so the word rendered
   2-4px larger than its neighbours and its cap-height rode above their baseline. */
.framer-1o9meou .framer-1u5slr h3.framer-text {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Logo was pinned to 51x37px regardless of breakpoint. These em values reproduce
   it exactly at the 40px desktop size and keep that ratio as the line scales down. */
.framer-1o9meou .framer-1apxe4q {
  width: 1.275em;
  height: 0.925em;
}

.framer-1o9meou .framer-sjuobe {
  gap: 0.25em;
}

.basenine-source-surface {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  overflow: hidden;
  vertical-align: top;
  background: transparent;
}

#basenine-hero {
  height: 1000px;
}

#basenine-booking-footer {
  height: 1450px;
}

#basenine-fixed-nav {
  position: fixed;
  inset: 0 0 auto;
  height: 118px;
  clip-path: inset(0 calc((100% - 395px) / 2));
  z-index: 2147479000;
}

@media (max-width: 809.98px) {
  #basenine-hero {
    height: 765px;
  }

  #basenine-booking-footer {
    height: calc(100vh + 475px);
  }

  #basenine-fixed-nav {
    height: 116px;
    clip-path: inset(0 calc((100% - 300px) / 2));
  }
}

@media (max-width: 329.98px) {
  #basenine-hero {
    height: 870px;
  }
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  #basenine-booking-footer {
    height: calc(60vh + 475px);
  }
}