/* Hide the "Made in Framer" badge (bottom-right). */
#__framer-badge-container {
  display: none !important;
}

/* Hide Framer's leftover original cards */
#cards .framer-7mf9yr-container,
#cards.bn-stack-ready > *:not(.bn-stack-card) {
  display: none !important;
}

/* Stacking section */
#cards.bn-stack-ready {
  display: flex !important;
  flex-flow: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 15dvh 0 !important;
  width: auto !important;
  overflow: visible !important;
}

/* Sticky card (outer).
   `top` must clear the fixed nav pill (118px tall) — at the previous 9em/108px
   the stack locked 10px *behind* it, clipping the card headings. 13em/156px
   leaves the stack sitting clearly below the nav. */
.bn-stack-card {
  position: sticky;
  top: 13em;
  width: 34em;
  max-width: 92vw;
  margin-bottom: 5em;
  z-index: 1;
}

.bn-stack-card:last-child {
  margin-bottom: 0;
}

/* Visual card (GSAP transform target) — layout only; colour comes from [data-theme] below. */
.bn-stack-card-inner {
  min-height: 50vh;
  padding: 2.75em;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Zalando Sans", "Zalando Sans Placeholder", sans-serif;
  will-change: transform;
}

.bn-stack-card__num {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  margin-top: auto;
  opacity: 0.5;
}

.bn-stack-card__h {
  font-size: 38.4px;
  font-weight: 400;
  line-height: 40.7px;
  letter-spacing: -1.344px;
  margin: 0;
  text-align: left;
}

.bn-stack-card__p {
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.126px;
  margin: 18px 0 0 0;
  text-align: left;
  opacity: 1;
}

/* Card themes */
.bn-stack-card-inner[data-theme="red"] {
  background: rgb(255, 59, 48);
  color: rgb(20, 20, 20);
}

.bn-stack-card-inner[data-theme="red"] .bn-stack-card__h {
  color: #f4f4ec;
}

.bn-stack-card-inner[data-theme="red"] .bn-stack-card__p {
  color: rgba(20, 20, 20, 0.44);
}

.bn-stack-card-inner[data-theme="black"] {
  background: #1e1e1e;
  color: #f4f4ec;
}

.bn-stack-card-inner[data-theme="black"] .bn-stack-card__h {
  color: #f4f4ec;
}

.bn-stack-card-inner[data-theme="black"] .bn-stack-card__p {
  color: rgba(244, 244, 236, 0.44);
}

.bn-stack-card-inner[data-theme="white"] {
  background: #ffffff;
  color: rgb(20, 20, 20);
}

.bn-stack-card-inner[data-theme="white"] .bn-stack-card__h {
  color: #1e1e1e;
}

.bn-stack-card-inner[data-theme="white"] .bn-stack-card__p {
  color: rgba(20, 20, 20, 0.44);
}

@media (max-width: 809.98px) {
  .bn-stack-card {
    /* Mobile nav is 116px tall; 7.5em/90px locked the stack behind it. */
    top: 11.5em;
    margin-bottom: 4em;
    width: 100%;
    max-width: 92vw;
  }

  .bn-stack-card-inner {
    min-height: 68vh;
    padding: 2em;
  }

  .bn-stack-card__num {
    font-size: 1em;
  }

  .bn-stack-card__h {
    font-size: 28px;
    line-height: 29.7px;
    letter-spacing: -0.98px;
  }

  .bn-stack-card__p {
    font-size: 18px;
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bn-stack-card {
    position: static;
    margin-bottom: 1em;
  }
}