/* Hide the classic HTML scrollbar on the page, overlays, and Framer layers.
   Embeds (iframes) keep a thin overlay scrollbar — see .rich-native-embed. */
html,
body,
#main,
#overlay,
[data-framer-component-type],
[data-framer-component-type="NativeScroll"],
[data-framer-component-type="Scroll"],
[class*="framer-"]:not(.rich-native-embed):not(.ipod-menu-scroll) {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#main::-webkit-scrollbar,
#overlay::-webkit-scrollbar,
[data-framer-component-type]::-webkit-scrollbar,
[data-framer-component-type="NativeScroll"]::-webkit-scrollbar,
[data-framer-component-type="Scroll"]::-webkit-scrollbar,
[class*="framer-"]:not(.rich-native-embed):not(.ipod-menu-scroll)::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.ipod-menu-scroll {
  scrollbar-width: thin;
}

:root {
  --case-study-embed-radius: 12px;
}

/* Every case-study live preview shares one 16:9 window. Clip the framed
   document to that radius — iframe border-radius does not mask page paint,
   which is why the left edge went square while the right stayed round. */
.framer-CYdbJ .framer-8an0bv-container,
.framer-CYdbJ .framer-oj4zbl,
.rich-native-embed {
  position: relative;
  overflow: hidden !important;
  border-radius: var(--case-study-embed-radius) !important;
  clip-path: inset(0 round var(--case-study-embed-radius));
  isolation: isolate;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.framer-CYdbJ .framer-8an0bv-container > iframe,
.framer-CYdbJ .framer-oj4zbl > iframe,
.rich-native-embed > iframe,
iframe.rich-native-embed-frame {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: var(--case-study-embed-radius) !important;
}

/* Classic always-on gutter: widen inside the rounded mask, never past it. */
.rich-native-embed[data-embed-clip="1"] > iframe {
  inset: 0 auto 0 0;
  width: calc(100% + var(--embed-gutter, 0px)) !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.rich-native-embed,
.rich-native-embed-frame {
  scrollbar-width: thin;
  scrollbar-color: rgba(24, 24, 24, 0.34) transparent;
}

.rich-native-embed::-webkit-scrollbar,
.rich-native-embed-frame::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  display: block;
  background: transparent;
}

.rich-native-embed::-webkit-scrollbar-track,
.rich-native-embed-frame::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}

.rich-native-embed::-webkit-scrollbar-thumb,
.rich-native-embed-frame::-webkit-scrollbar-thumb {
  background-color: rgba(24, 24, 24, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.rich-native-embed::-webkit-scrollbar-thumb:hover,
.rich-native-embed-frame::-webkit-scrollbar-thumb:hover {
  background-color: rgba(24, 24, 24, 0.48);
  background-clip: padding-box;
}

.rich-native-embed::-webkit-scrollbar-corner,
.rich-native-embed-frame::-webkit-scrollbar-corner {
  background: transparent;
}

/* copy-me: label layout-tweens 400ms (cubic-bezier(0.44, 0, 0.56, 1)).
   Copy / check glyphs mount at t=0, so they finish before the type has moved.
   Hold the glyph through the first half of that tween, then fade it in so it
   lands with the text. Same timing for the copied-state check. */
.framer-tFq26 .framer-17vmv04,
.framer-tFq26 .framer-vhhlwo {
  opacity: 0;
  animation: copy-me-glyph-in 0.22s cubic-bezier(0.44, 0, 0.56, 1) 0.18s both;
}

@keyframes copy-me-glyph-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Below the 810px tablet boundary the icon windows are contained by
   overlay-mobile.css and must scroll instead of clipping, so overlay
   scrollbars become visible again there. */
@media (max-width: 810px) {
  #overlay,
  #overlay *,
  .framer-Y5Cz0,
  .framer-Y5Cz0 *,
  .framer-MvgBd,
  .framer-MvgBd * {
    scrollbar-width: auto;
  }

  #overlay::-webkit-scrollbar,
  #overlay *::-webkit-scrollbar,
  .framer-Y5Cz0::-webkit-scrollbar,
  .framer-Y5Cz0 *::-webkit-scrollbar,
  .framer-MvgBd::-webkit-scrollbar,
  .framer-MvgBd *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
  }
}