/* Ticker marquee — each ul has items duplicated 3x by Framer, loop by scrolling -33.333% */
@keyframes blockd-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@keyframes blockd-marquee-right {
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}

.blockd-marquee-left ul {
  animation: blockd-marquee-left 40s linear infinite;
  will-change: transform !important;
}
.blockd-marquee-right ul {
  animation: blockd-marquee-right 40s linear infinite;
  will-change: transform !important;
}
.blockd-marquee-fast ul { animation-duration: 25s; }

/* Pause on hover for logos */
.blockd-marquee-left:hover ul,
.blockd-marquee-right:hover ul { animation-play-state: paused; }

/* Nav bar morph on scroll — target the Primary nav variant */
nav.framer-YcFz2 {
  transition: background-color .3s ease, backdrop-filter .3s ease,
              border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
body.blockd-scrolled nav.framer-YcFz2 > .framer-1gs8anj {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(117, 115, 114, 0.15) !important;
  box-shadow: 0 4px 30px rgba(97, 74, 68, 0.08) !important;
}

/* Dashboard tilt — start tilted, un-tilt as user scrolls into view */
.framer-vci1j0 {
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
body.blockd-hero-past .framer-vci1j0 {
  transform: perspective(1000px) translateY(0) scale(1) rotateX(0) !important;
}

/* Pulsing green status dot in the automations hero card */
@keyframes blockd-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
.blockd-pulse { animation: blockd-dot-pulse 2s ease-in-out infinite; }

/* Feature block mockup frames — shorten the blue gradient so the dashboard
   image doesn't float in a sea of empty space. */
.framer-qcK0y .framer-1qdt03v,
.framer-qcK0y .framer-1npo8i {
  height: 440px !important;
  aspect-ratio: auto !important;
}
.framer-qcK0y .framer-7wef5b,
.framer-qcK0y .framer-e4xy3e {
  padding: 32px !important;
}

/* Flex-center the blockd mockup image inside each illustration frame and
   size it up (~10%) from the previous 90% cap. */
.framer-qcK0y .framer-1qdt03v [data-framer-background-image-wrapper],
.framer-qcK0y .framer-1npo8i [data-framer-background-image-wrapper] {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}
.framer-qcK0y .framer-1qdt03v img[src^="/blockd-"],
.framer-qcK0y .framer-1npo8i img[src^="/blockd-"] {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
}

/* Hide the "Stay in the loop / Community" social media cards section */
[data-framer-name="Community"] { display: none !important; }

/* Hide the broken logo ticker section */
#logos, [data-framer-name="Logos Ticker"] { display: none !important; }

/* Hide the "About App" device mockup section (phone with old Dreelio UI) */
#about-app, [data-framer-name="About App"] { display: none !important; }

/* Mobile: force hero dashboard card to fit viewport and render flat.
   Framer's CSS has width:200% for a horizontal-scroll effect that
   requires the Framer JS bundle we stripped. */
@media (max-width: 809.98px) {
  /* Hero: let content determine height and stop clipping the dashboard. */
  .framer-vr1el7 {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 48px !important;
  }
  .framer-1ks373 {
    overflow: visible !important;
  }
  .framer-qcK0y .framer-vci1j0 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.2 !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* Shrink feature block mockups so the image fills more of the blue box */
  .framer-qcK0y .framer-1qdt03v,
  .framer-qcK0y .framer-1npo8i {
    height: 320px !important;
  }
  .framer-qcK0y .framer-7wef5b,
  .framer-qcK0y .framer-e4xy3e {
    padding: 16px !important;
  }
}

/* Mobile nav menu overlay */
#blockd-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(249, 248, 248, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
#blockd-mobile-menu.open { display: flex; }
#blockd-mobile-menu a {
  font-family: "Open Runde", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: rgb(26, 22, 21);
  text-decoration: none;
  padding: 8px 24px;
}
#blockd-mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 28px;
  cursor: pointer;
  color: rgb(26, 22, 21);
  background: none;
  border: none;
  padding: 8px;
}
#blockd-mobile-menu .cta-btn {
  margin-top: 12px;
  background: rgb(26, 22, 21);
  color: #fff !important;
  border-radius: 100px;
  padding: 14px 32px !important;
  font-size: 16px !important;
}

/* Hide the "Save 20%" annual-discount badge when the user is viewing Monthly. */
body.blockd-monthly [data-framer-name="Save $203"] { display: none !important; }

/* The Monthly price element (framer-5upv3k) is absolutely positioned at
   bottom:-52px by Framer — intended to slide up via a Framer animation we
   stripped. Force it to sit at the top of the price container so it's
   visible when toggled on. */
.framer-5upv3k { bottom: auto !important; top: 0 !important; }

/* Smooth card hover lift */
a.framer-8oVXz, a.framer-GY1mr {
  transition: transform .25s ease, box-shadow .25s ease;
}
a.framer-GY1mr:hover { transform: translateY(-1px); }
a.framer-8oVXz:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(97,74,68,.1); }