/* Shared card frame. One class on the root, everything else via data-*.
   Values from the live site: tile-surface / item-type modes for padding,
   scss/components/_cards.scss (.tt-product-card::before) for shadow and grow.

   Hover is a number like on the Button: --_hover is 0 or 1. The card sets it
   on its own hover; a parent can set --tt-card-hover: 1. The surface grows
   outwards by --_grow-size (half of the live site's 0.5rem), so the content
   never moves. A cover image on top grows up, left and right with it. */
.NeoTZFuezh2Ifp4sXQoA {
  --_t: var(--transition-base, 0.3s cubic-bezier(0.65, 0, 0.35, 1));
  --_hover: var(--tt-card-hover, 0);

  /* Surface: Card */
  --_pad: 1.5rem;
  --_radius: 1.2rem;
  --_radius-hover: 1.7rem;
  --_grow-size: 0px;

  /* Theme: Light */
  --_bg: var(--white-a-100, #fff);
  --_fg: var(--black-a-100, #0d0d0d);
  --tt-heading-color: var(--black-a-100, #0d0d0d);
  --tt-text-color: var(--black-a-60, rgba(13, 13, 13, 0.6));
  /* Buttons and other components with Background: Auto read this toggle:
     initial = light, empty = dark (see Button.module.css). */
  --tt-dark: initial;

  /* Shadow: Soft */
  --_shadow-rest: 0 4px 10px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
  --_shadow-hover: 0 20px 34px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03),
    0 1px 8px rgba(0, 0, 0, 0.02);

  /* Geometry shared by surface and both shadow layers. */
  --_inset: calc(var(--_grow-size) * var(--_hover) * -1);
  --_r: calc(var(--_radius) + (var(--_radius-hover) - var(--_radius)) * var(--_hover));

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* min-height, not height: a fixed height would stop the list from
     stretching cards in a row to the same height. */
  min-height: 100%;
  margin: 0;
  color: var(--_fg);
  text-decoration: none;

  /* Inside a Card List: take the width the list hands down. If the host
     element is display: contents, this element is the flex item itself. */
  flex: 0 0 var(--tt-card-width, auto);
  min-width: 0;
  scroll-snap-align: start;
}

.NeoTZFuezh2Ifp4sXQoA,
.NeoTZFuezh2Ifp4sXQoA *,
.NeoTZFuezh2Ifp4sXQoA::before,
.NeoTZFuezh2Ifp4sXQoA::after {
  box-sizing: border-box;
}

.K7JOsTwAkVetE3ZXRboI {
  display: block;
}

/* ---------- Surface ---------- */

/* Card Small is for dense content (e.g. inside an Info Card): --_space
   scales the gaps between its parts down with the padding. */
.NeoTZFuezh2Ifp4sXQoA[data-surface="card-small"] {
  --_space: 0.5;
  --_pad: 1rem;
  --_radius: 0.8rem;
  --_radius-hover: 1.1rem;
}

.NeoTZFuezh2Ifp4sXQoA[data-surface="card-large"] {
  --_pad: 2rem;
}

/* Glass: based on .tt-blog-card.glass on the live site: translucent white,
   a fine white rim and a light edge along the top. */
.NeoTZFuezh2Ifp4sXQoA:is([data-surface="glass"], [data-surface="glass-blur"]) {
  --_bg: rgba(255, 255, 255, 0.72);
  --_edge:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 2px 4px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(13, 13, 13, 0.04);
}

/* Glass Blur adds a frosted, slightly saturated blur, so the fill can be
   lighter. A backdrop blur is redrawn on every frame when something moves
   behind it (shader, video, marquee), so plain Glass is the cheap option there. */
.NeoTZFuezh2Ifp4sXQoA[data-surface="glass-blur"] {
  --_bg: rgba(255, 255, 255, 0.45);
  --_frost: blur(16px) saturate(160%);
}

/* Soft: a light grey tint with a fine border and no shadow, for quiet rows
   such as illustration cards. Translucent, so it works on any light section. */
.NeoTZFuezh2Ifp4sXQoA[data-surface="soft"] {
  --_bg: rgba(13, 13, 13, 0.035);
  --_edge: inset 0 0 0 1px rgba(13, 13, 13, 0.06);
  --_shadow-rest: none;
  --_shadow-hover: none;
}

.NeoTZFuezh2Ifp4sXQoA[data-surface="plain"] {
  --_pad: 1rem;
  --_bg: transparent;
  --_shadow-rest: none;
  --_shadow-hover: none;
}

@media (max-width: 767px) {
  .NeoTZFuezh2Ifp4sXQoA { --_pad: 1rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-surface="card-small"] { --_pad: 0.875rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-surface="card-large"] { --_pad: 1.5rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-surface="plain"] { --_pad: 0.75rem; }
}

/* ---------- Theme ---------- */

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"] {
  --_bg: hsla(0, 0%, 16%, 0.6);
  --_fg: var(--white-a-100, #fff);
  --tt-heading-color: var(--white-a-100, #fff);
  --tt-text-color: var(--white-a-60, rgba(255, 255, 255, 0.6));
  --tt-dark: ;
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"]:is([data-surface="glass"], [data-surface="glass-blur"]) {
  --_bg: rgba(255, 255, 255, 0.1);
  --_edge:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 2px 1px rgba(255, 255, 255, 0.12);
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"][data-surface="glass-blur"] {
  --_bg: rgba(255, 255, 255, 0.06);
  --_frost: blur(16px) saturate(140%);
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"][data-surface="soft"] {
  --_bg: rgba(255, 255, 255, 0.05);
  --_edge: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"][data-surface="plain"] {
  --_bg: transparent;
}

/* ---------- Max width ----------
   Caps the width the page or a Card List hands down, per breakpoint. Tablet
   and Mobile without a value keep the larger breakpoint's. */
.NeoTZFuezh2Ifp4sXQoA {
  max-width: var(--_max, none);
}

.NeoTZFuezh2Ifp4sXQoA[data-max="small"] { --_max: 16rem; }
.NeoTZFuezh2Ifp4sXQoA[data-max="medium"] { --_max: 20rem; }
.NeoTZFuezh2Ifp4sXQoA[data-max="large"] { --_max: 24rem; }
.NeoTZFuezh2Ifp4sXQoA[data-max="x-large"] { --_max: 32rem; }

@media (max-width: 991px) {
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="none"] { --_max: none; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="small"] { --_max: 16rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="medium"] { --_max: 20rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="large"] { --_max: 24rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="x-large"] { --_max: 32rem; }
}

@media (max-width: 767px) {
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="none"] { --_max: none; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="small"] { --_max: 16rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="medium"] { --_max: 20rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="large"] { --_max: 24rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="x-large"] { --_max: 32rem; }
}

/* ---------- Shadow and hover ---------- */

.NeoTZFuezh2Ifp4sXQoA[data-shadow="none"] {
  --_shadow-rest: none;
  --_shadow-hover: none;
}

/* Hover Auto resolves in CardFrame.tsx: grow only when the card is a link.
   Without grow nothing moves: no growth, rounder corners or deeper shadow. */
.NeoTZFuezh2Ifp4sXQoA[data-hover="grow"] {
  --_grow-size: 0.25rem;
}

/* Real hover only on devices that hover, so touch doesn't leave cards stuck. */
@media (hover: hover) {
  .NeoTZFuezh2Ifp4sXQoA[data-hover="grow"]:hover {
    --_hover: 1;
  }
}

.NeoTZFuezh2Ifp4sXQoA[data-hover="grow"][data-linked]:focus-visible {
  --_hover: 1;
}

.NeoTZFuezh2Ifp4sXQoA[data-linked]:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.55);
  outline-offset: 0.75rem;
  border-radius: var(--_r);
}

/* A linked card hands its hover to Visual only buttons inside it. */
.NeoTZFuezh2Ifp4sXQoA[data-linked] {
  --tt-btn-hover: var(--_hover);
}

/* Rest and hover shadow on two layers behind the surface, so the hover
   shadow can fade in instead of jumping. */
.NeoTZFuezh2Ifp4sXQoA::before,
.NeoTZFuezh2Ifp4sXQoA::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(var(--_inset) + 1px);
  border-radius: var(--_r);
  pointer-events: none;
  transition:
    inset var(--_t),
    border-radius var(--_t),
    opacity var(--_t);
}

.NeoTZFuezh2Ifp4sXQoA::before {
  box-shadow: var(--_shadow-rest);
}

.NeoTZFuezh2Ifp4sXQoA::after {
  box-shadow: var(--_shadow-hover);
  opacity: var(--_hover);
}

.NeoTZFuezh2Ifp4sXQoA > [data-part="surface"] {
  position: absolute;
  z-index: 1;
  inset: var(--_inset);
  border-radius: var(--_r);
  background-color: var(--_bg);
  box-shadow: var(--_edge, none);
  -webkit-backdrop-filter: var(--_frost, none);
  backdrop-filter: var(--_frost, none);
  transition:
    inset var(--_t),
    border-radius var(--_t),
    background-color var(--_t);
}

/* The top area keeps its size in the layout (3:2), so the content below never
   moves. Its image is positioned with the surface's inset on top, left and
   right, so it grows with the frame and keeps the frame's corner radius. */
.NeoTZFuezh2Ifp4sXQoA > [data-part="top"] {
  position: relative;
  z-index: 2;
  aspect-ratio: 3 / 2;
}

.NeoTZFuezh2Ifp4sXQoA > [data-part="top"] > * {
  position: absolute;
  top: var(--_inset);
  left: var(--_inset);
  width: calc(100% - 2 * var(--_inset));
  height: calc(100% - var(--_inset));
  border-radius: var(--_r) var(--_r) 0.5rem 0.5rem;
  object-fit: cover;
  transition:
    top var(--_t),
    left var(--_t),
    width var(--_t),
    height var(--_t),
    border-radius var(--_t);
}

.NeoTZFuezh2Ifp4sXQoA > [data-part="content"] {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(0.75rem * var(--_space, 1));
  padding: var(--_pad);
}

/* Webflow wraps slot content in one element; display: contents lets the
   heading, text and buttons inside take the content's gap. */
.NeoTZFuezh2Ifp4sXQoA > [data-part="content"] ::slotted(*) {
  display: contents;
}

/* Like the live site: no growing on small screens, only the shadow changes. */
@media (max-width: 767px) {
  .NeoTZFuezh2Ifp4sXQoA[data-hover="grow"] {
    --_grow-size: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .NeoTZFuezh2Ifp4sXQoA {
    --_grow-size: 0px;
  }
}

/* Toggle: Track (grey track, white pill, from the Ownership switch) or Pills.
   Radii follow the Button of the same size (0.5 / 0.6 / 0.8rem); the pill
   inside the track is smaller by the track's padding, so both curves stay parallel.
   Light and dark colors use the --tt-dark space toggle (see Button.module.css). */
.tRW6ByTonaofv2rjtj3r {
  --_radius: 0.6rem;
  --_pad: 0.2rem;
  --_px: 0.8rem;
  --_py: 0.45rem;
  --_font: 0.75rem;
  --_bleed-end: 0px;

  --_d-text: var(--tt-dark) var(--white-a-60, rgba(255, 255, 255, 0.6));
  --_d-text-active: var(--tt-dark) var(--white-a-100, #fff);
  --_d-track: var(--tt-dark) var(--white-a-10, rgba(255, 255, 255, 0.1));
  --_d-hover: var(--tt-dark) var(--white-a-5, rgba(255, 255, 255, 0.05));
  --_d-pill: var(--tt-dark) rgba(255, 255, 255, 0.14);

  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  font-family: Yellixvf, Arial, sans-serif;
}

.tRW6ByTonaofv2rjtj3r *,
.tRW6ByTonaofv2rjtj3r *::before,
.tRW6ByTonaofv2rjtj3r *::after {
  box-sizing: border-box;
}

.tRW6ByTonaofv2rjtj3r[data-size="x-small"] {
  --_radius: 0.5rem;
  --_pad: 0.15rem;
  --_px: 0.6rem;
  --_py: 0.35rem;
  --_font: 0.65rem;
}

.tRW6ByTonaofv2rjtj3r[data-size="medium"] {
  --_radius: 0.8rem;
  --_pad: 0.25rem;
  --_px: 1.1rem;
  --_py: 0.6rem;
  --_font: 0.9rem;
}

/* The row scrolls; its block padding leaves room for the active pill's shadow. */
.tRW6ByTonaofv2rjtj3r [data-part="row"] {
  display: flex;
  padding-block: 0.25rem;
  margin-block: -0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tRW6ByTonaofv2rjtj3r [data-part="row"]::-webkit-scrollbar {
  display: none;
}

.tRW6ByTonaofv2rjtj3r [data-part="track"] {
  position: relative;
  display: flex;
  flex: none;
  gap: 0.15rem;
}

/* The active pill: one element that slides and resizes to the active item. */
.tRW6ByTonaofv2rjtj3r [data-part="indicator"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--_w, 0px);
  border-radius: calc(var(--_radius) - var(--_pad));
  background: var(--_d-pill, var(--white-a-100, #fff));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: translateX(var(--_x, 0px));
  pointer-events: none;
}

.tRW6ByTonaofv2rjtj3r [data-part="indicator"][data-ready] {
  transition:
    transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tRW6ByTonaofv2rjtj3r [data-part="indicator"][data-ready] {
    transition: none;
  }
}

/* The grey track is the toggle itself, so it stays in place and the items
   scroll inside it instead of the track being cut off at the edge. */
.tRW6ByTonaofv2rjtj3r[data-style="track"] {
  padding: var(--_pad);
  border-radius: var(--_radius);
  background: var(--_d-track, var(--black-a-6, rgba(0, 0, 0, 0.06)));
}

.tRW6ByTonaofv2rjtj3r [data-part="item"] {
  position: relative;
  flex: none;
  padding: var(--_py) var(--_px) calc(var(--_py) - 0.05rem);
  border: 0;
  border-radius: calc(var(--_radius) - var(--_pad));
  background: transparent;
  color: var(--_d-text, var(--black-a-60, rgba(0, 0, 0, 0.6)));
  font: inherit;
  font-size: var(--_font);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.tRW6ByTonaofv2rjtj3r [data-part="item"]:not([data-active]):hover {
  color: var(--_d-text-active, var(--black-a-96, rgba(0, 0, 0, 0.96)));
}

.tRW6ByTonaofv2rjtj3r[data-style="pills"] [data-part="item"]:not([data-active]):hover {
  background: var(--_d-hover, var(--black-a-6, rgba(0, 0, 0, 0.06)));
}

.tRW6ByTonaofv2rjtj3r [data-part="item"][data-active] {
  color: var(--_d-text-active, var(--black-a-96, rgba(0, 0, 0, 0.96)));
}

.tRW6ByTonaofv2rjtj3r [data-part="item"]:focus-visible {
  outline: 2px solid var(--tt-color-brand, #6f00ff);
  outline-offset: 2px;
}

.tRW6ByTonaofv2rjtj3r[data-style="pills"] {
  --_pad: 0rem;
}

/* Bleed: the row runs on to the right screen edge (cut-off items show there
   is more). Its end padding lets the last item scroll back to the box edge. */
.tRW6ByTonaofv2rjtj3r[data-bleed] [data-part="row"] {
  margin-right: calc(var(--_bleed-end) * -1);
  padding-right: var(--_bleed-end);
}

/* Fill: the parent's full width, shared equally by the items. */
.tRW6ByTonaofv2rjtj3r[data-fill] {
  width: 100%;
}

.tRW6ByTonaofv2rjtj3r[data-fill] [data-part="track"] {
  flex: 1;
}

.tRW6ByTonaofv2rjtj3r[data-fill] [data-part="item"] {
  flex: 1 1 0;
  min-width: 0;
}

.tRW6ByTonaofv2rjtj3r [data-part="row"][data-dragging] {
  cursor: grabbing;
  user-select: none;
}

/* Header with the two side names (or the shared Toggle), then the rows. The
   frame comes from CardFrame.module.css. --tt-ownership-col is read by the
   items, so their marks line up under the side names. */
.xWELfkH7edv1Efwk7_8v {
  --tt-ownership-col: 7rem;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.xWELfkH7edv1Efwk7_8v *,
.xWELfkH7edv1Efwk7_8v *::before,
.xWELfkH7edv1Efwk7_8v *::after {
  box-sizing: border-box;
}

.e6hffjz8gUuwVljsNbAj {
  display: block;
}

/* ---------- Header ---------- */

.xWELfkH7edv1Efwk7_8v > [data-part="header"] {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--tt-space-card-xs, 0.5rem);
}

/* Two columns as wide as the marks below; the Toggle fills them. */
.xWELfkH7edv1Efwk7_8v [data-part="sides"] {
  display: grid;
  grid-template-columns: var(--tt-ownership-col) var(--tt-ownership-col);
}

.xWELfkH7edv1Efwk7_8v [data-part="side"] {
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
}

.xWELfkH7edv1Efwk7_8v [data-part="switch"] {
  display: flex;
  width: calc(var(--tt-ownership-col) * 2);
}

/* ---------- Rows ---------- */

/* Webflow wraps slot content in one element; display: contents lets each
   item become a row of the list. */
.xWELfkH7edv1Efwk7_8v [data-part="items"] ::slotted(*) {
  display: contents;
}

.xWELfkH7edv1Efwk7_8v [data-part="items"] {
  display: flex;
  flex-direction: column;
}

/* No header row on mobile: the items show the side names themselves. The
   Toggle stays, full width. */
@media (max-width: 767px) {
  .xWELfkH7edv1Efwk7_8v:not([data-toggle]) > [data-part="header"] {
    display: none;
  }

  .xWELfkH7edv1Efwk7_8v[data-toggle] > [data-part="header"] {
    justify-content: stretch;
    padding-bottom: var(--tt-space-card-sm, 1rem);
  }

  .xWELfkH7edv1Efwk7_8v [data-part="switch"] {
    width: 100%;
  }
}