/* Stack the four tab-mockup images on top of each other; the active one
   lifts into place and sits in front, the rest wait below/behind it.
   They're position: absolute, so they no longer contribute to the wrap's
   flow-based height like the original single in-flow image did — pin the
   same aspect ratio directly on the wrap so it doesn't collapse to zero. */
[data-framer-name="Images"] {
  position: relative;
  aspect-ratio: 1.28;
  overflow: visible !important;
}

/* The stacked-deck peek effect (see tab-images.js STACK offsets) needs open
   overflow to show layers poking past the front card's edge. On mobile the
   card is too narrow for that peek to fit on screen without causing
   horizontal scroll, so the box clips it instead; tab-images.js also scales
   the offsets down for this breakpoint so the clipped peek still reads. */
@media (max-width: 1439.98px) {
  [data-framer-name="Images"] {
    overflow: hidden !important;
    /* Below 1440px this element is a flex-basis:0 flex-grow:1 item inside a
       column-direction flex parent with no explicit height, so its main-axis
       size (height) resolves to a definite 0 instead of "auto" -- and
       aspect-ratio only computes a size from the other definite axis (width)
       when the axis being solved for is auto. Overriding flex-basis to auto
       makes height auto again so aspect-ratio can apply, which is how the
       entire product mockup image was collapsing to zero height and
       disappearing on tablet/mobile. */
    flex-basis: auto !important;
  }
}

/* Pre-existing bug, unrelated to the tabs feature: this decorative corner-
   bracket graphic (aria-hidden, purely visual) and its wrapper have no
   pointer-events: none, so they silently swallow clicks on whatever sits
   underneath — including these cards. Disable events on the wrapper too
   (its own class name is a Framer-generated hash, unstable to target). */
[data-framer-name="Cornner"],
*:has(> [data-framer-name="Cornner"]) {
  pointer-events: none;
}

/* Each layer's stack position (front, or one of the grayed-out layers behind
   it) is driven by tab-images.js through the --automind-tab-* custom
   properties below, NOT by setting transform inline directly — this
   export's "Unframe Interactivity Helper" fallback CSS force-resets any
   inline style whose text contains "transform" (plain substring match)
   back to transform: none. Custom property names don't match that text,
   so they're left alone. All layers stay fully opaque — it's the filter
   (color vs. grayscale/washed-out) that marks a layer as "not active", not
   transparency. */
.automind-tab-image {
  --automind-tab-tx: 0px;
  --automind-tab-ty: 0px;
  --automind-tab-hover: 0px;
  --automind-tab-filter: none;
  position: absolute !important;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transform: translate(var(--automind-tab-tx), calc(var(--automind-tab-ty) + var(--automind-tab-hover)));
  filter: var(--automind-tab-filter);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

/* Tablet/laptop (810-1439px): same idea as the mobile rule below -- the
   Images box clips its overflow here, so inset every layer from the
   top/right edges to give the back layers (0.65 of the desktop offsets, see
   tab-images.js) room to fan out visibly instead of piling up. */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .automind-tab-image {
    inset: 15% 15% 2% 2%;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
}

/* Mobile: the back layers fan out up and to the right (tab-images.js), and
   the Images box clips its overflow here. Pull every layer in from the
   top/right edges so they have room to sit visibly apart, like on desktop,
   instead of being squeezed into a tight pile to dodge the clip. Framer's
   own class on these layers pins width:100% + aspect-ratio, which would
   ignore the inset and just shove the layer down past the bottom edge --
   reset both so the inset actually shrinks it. */
@media (max-width: 809.98px) {
  .automind-tab-image {
    inset: 13% 11% 2% 2%;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
}

[data-framer-name="Cards"] .framer-cZR4n {
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* The active card's white background is the same as the page background, so
   without a shadow it doesn't read as a raised card at all — it just looks
   like plain text. */
[data-framer-name="Cards"] .framer-cZR4n[data-framer-name="Active"] {
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.14), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
}

/* Autoplay progress bar, one per card, running along the card's entire
   bottom edge like a thin underline rather than an inset pill. */
.automind-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 0 0 4px 4px;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  pointer-events: none;
}

.automind-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(0, 143, 177, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .automind-tab-image {
    transition: none;
  }

  .automind-progress-track {
    display: none;
  }
}