/* Values from the live site: .tt-label (0.8rem bold), Label "Platform
   Gradient", .tt-batch (outline badge, 0.6rem).

   Gradients: Product is the platform gradient (dark backgrounds #6085FF
   #75ACFF #A46BFF, light backgrounds #033EFF #0060F0 #5900E8). Green and Blue
   are derived the same way: three stops, a lighter set for dark backgrounds
   and a deeper one for light backgrounds. The set is picked with the --tt-dark
   space toggle (see Button.module.css): --_d-g only exists when dark. */
.cjQoqVs3VqSYANFvJFBU {
  --_g: none;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* As wide as its text in any parent (grid, flex, block). */
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  /* Variable font: 600 reads as bold enough and matches the headings. */
  font-weight: 600;
  /* Same stylistic sets as the site's headings and buttons. */
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
}

.c02wqn5j0_pCupzmPUjp {
  display: block;
}

/* ---------- Size and case ----------
   Text and badges step differently: text labels grow more towards the top,
   badges stay compact.
   Text:  X-Small 0.7, Small 0.8 (.tt-label), Medium 0.9, Large 1.1, X-Large 1.3rem.
   Badge: X-Small 0.5, Small 0.55, Medium 0.6 (.tt-batch), Large 0.7
          (.tt-batch.large), X-Large 0.8rem. */

.cjQoqVs3VqSYANFvJFBU[data-size="x-small"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="small"] { font-size: 0.8rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="large"] { font-size: 1.1rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="x-large"] { font-size: 1.3rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Blend ----------
   Lets the label mix with what's behind it, e.g. a shader: Plus Lighter
   glows on dark, Multiply sinks into light. Auto picks by the --tt-dark
   toggle, like the Quote. */
.cjQoqVs3VqSYANFvJFBU[data-blend="auto"] {
  --_d-blend: var(--tt-dark) plus-lighter;

  mix-blend-mode: var(--_d-blend, multiply);
}

.cjQoqVs3VqSYANFvJFBU[data-blend="plus-lighter"] { mix-blend-mode: plus-lighter; }
.cjQoqVs3VqSYANFvJFBU[data-blend="multiply"] { mix-blend-mode: multiply; }

/* ---------- Colors ---------- */

/* Muted: the text color around it, toned down like the Heading Group subline. */
.cjQoqVs3VqSYANFvJFBU[data-muted] {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-color="product"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #6085ff 10%, #75acff 38%, #a46bff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #033eff 10%, #0060f0 38%, #5900e8 90%));
}

/* Stays within greens: a fresh green, a lighter mint, a cooler green. */
.cjQoqVs3VqSYANFvJFBU[data-color="green"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #3ddc84 10%, #86efac 45%, #2bc48a 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #00873e 10%, #12a150 45%, #047857 90%));
}

.cjQoqVs3VqSYANFvJFBU[data-color="blue"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #4c9bff 10%, #7fd0ff 45%, #6b7cff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #0055e5 10%, #0089d1 45%, #3442e0 90%));
}

/* Stays within the brand purples (--tt-color-brand #6f00ff, brand-soft #8b33ff). */
.cjQoqVs3VqSYANFvJFBU[data-color="purple"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #a46bff 10%, #c39bff 45%, #8b33ff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #5900e8 10%, #8b33ff 45%, #6f00ff 90%));
}

/* Text in color: the gradient fills the letters. */
.cjQoqVs3VqSYANFvJFBU[data-color] [data-part="text"] {
  background-image: var(--_g);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Badges ---------- */

/* Padding in em, so every size keeps the same proportions. The text is
   nudged down by --_shift (less padding below than above) because the font's
   line box sits a little high; capitals have no descenders and need a bit
   more. The total height stays the same either way. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"],
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"] {
  --_shift: 0.04em;

  padding: calc(0.3em + var(--_shift)) 0.55em calc(0.3em - var(--_shift));
  border-radius: 0.6em;
  font-size: 0.6rem;
  line-height: 1.1;
  font-weight: 600;
}

.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-small"] { font-size: 0.5rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="small"] { font-size: 0.55rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="large"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-large"] { font-size: 0.8rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase]:is([data-style="badge"], [data-style="badge-filled"]) {
  --_shift: 0.06em;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge"]:not([data-color]) {
  border: 1px solid color-mix(in srgb, currentColor 80%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"]:not([data-color]) {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-muted]:is([data-style="badge"], [data-style="badge-filled"]) {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

/* Colored badge: a 1px gradient border, drawn on a layer whose middle is
   cut out with a mask, so the gradient can also run through the border. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"][data-color]::before,
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background-image: var(--_g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Filled: a light tint of the gradient behind the text. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--_g);
  opacity: 0.14;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  opacity: 0.5;
}

/* ---------- Animated ----------
   The gradient is three times as wide as the label and slides back and
   forth, in the text and the border alike. */

.cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
.cjQoqVs3VqSYANFvJFBU[data-animated]::before,
.cjQoqVs3VqSYANFvJFBU[data-animated]::after {
  background-size: 300% 100%;
  animation: Tl0mQjlzMCz5aiuOUZw4 4s ease-in-out infinite alternate;
}

@keyframes Tl0mQjlzMCz5aiuOUZw4 {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
  .cjQoqVs3VqSYANFvJFBU[data-animated]::before,
  .cjQoqVs3VqSYANFvJFBU[data-animated]::after {
    animation: none;
  }
}

/* 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;
  }
}

/* Inner layout of the Card. Every part is reached by its direct path from
   .body (e.g. .body > main > text): the Label and the Button inside the card
   have parts with the same names (text, title, icon), and a plain descendant
   selector like ".body [data-part=text]" would style them too (that set every
   label to the card's text size).

   The frame (surface, theme, shadow, hover) lives in
   CardFrame.module.css. Heading and rich text render inside the Shadow DOM, so
   the card styles them completely; site tag styles don't reach in.

   Values from the live site's tiles: tile-heading (1rem / 1.3rem, 600,
   ss03 ss08 ss12), tt-tile-text and tt-tile-rte (Regular = their X-Small,
   0.9rem / 1.4, 60% opacity; Large 1.1rem / 1.5 for teasers), Feature Icon sizes, "platform" list dots from
   scss/components/_richtext.scss. */
.TsvLA8kGzKoFtvuHbPgD {
  --_heading: 1rem;
  --_heading-lh: 1.2;
  --_text: 0.9rem;
  --_text-lh: 1.4;
  --_icon: 3rem;

  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(1rem * var(--_space, 1));
}

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

.gAWtFxmyIcrAgyj3o4K7 {
  display: block;
}

/* ---------- Sizes ---------- */

.TsvLA8kGzKoFtvuHbPgD[data-heading-size="x-small"] { --_heading: 0.8rem; --_heading-lh: 1.25; }
.TsvLA8kGzKoFtvuHbPgD[data-heading-size="medium"] { --_heading: 1.3rem; }
.TsvLA8kGzKoFtvuHbPgD[data-heading-size="large"] { --_heading: 1.9rem; --_heading-lh: 1.1; }

.TsvLA8kGzKoFtvuHbPgD[data-text-size="small"] { --_text: 0.8rem; }
.TsvLA8kGzKoFtvuHbPgD[data-text-size="large"] { --_text: 1.1rem; --_text-lh: 1.5; }

/* Text gap: heading block to text. Without it, 0.35em of the text size. */
.TsvLA8kGzKoFtvuHbPgD[data-text-gap="none"] { --_text-gap: 0rem; }
.TsvLA8kGzKoFtvuHbPgD[data-text-gap="x-small"] { --_text-gap: 0.25rem; }
.TsvLA8kGzKoFtvuHbPgD[data-text-gap="small"] { --_text-gap: 0.5rem; }
.TsvLA8kGzKoFtvuHbPgD[data-text-gap="medium"] { --_text-gap: 0.75rem; }
.TsvLA8kGzKoFtvuHbPgD[data-text-gap="large"] { --_text-gap: 1rem; }
.TsvLA8kGzKoFtvuHbPgD[data-text-gap="x-large"] { --_text-gap: 1.5rem; }

.TsvLA8kGzKoFtvuHbPgD[data-icon-size="small"] { --_icon: 1.5rem; }
.TsvLA8kGzKoFtvuHbPgD[data-icon-size="large"] { --_icon: 4rem; }
.TsvLA8kGzKoFtvuHbPgD[data-icon-size="x-large"] { --_icon: 5rem; }

@media (max-width: 767px) {
  .TsvLA8kGzKoFtvuHbPgD[data-heading-size="medium"] { --_heading: 1.2rem; }
  .TsvLA8kGzKoFtvuHbPgD[data-heading-size="large"] { --_heading: 1.5rem; }
}

/* ---------- Parts ---------- */

/* Heading and text are one block: the text sits close under the heading
   (0.35em, so it scales with the text size). Only the action keeps a wider
   distance, as a block of its own. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* Title and an icon on the right share a row. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] > [data-part="title"] {
  margin: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.5rem * var(--_space, 1));
  min-width: 0;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] > [data-part="title"] > [data-part="heading"] {
  margin: 0;
  color: var(--tt-heading-color);
  font-size: var(--_heading);
  line-height: var(--_heading-lh);
  font-weight: 600;
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
  text-wrap: balance;
}

/* The label's wrapper only marks it for useEmptySlots; an empty label (a
   Text Node left blank in Webflow) takes no space. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] > [data-part="title"] > [data-part="label"] {
  display: contents;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] > [data-part="title"] > [data-part="label"][data-empty] {
  display: none;
}

/* Buttons always sit at the bottom, so links line up across cards in a row. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: calc(1rem * var(--_space, 1));
}

/* Optical alignment: the small text button is 2rem high, but its text only
   ~0.77rem (0.7rem x 1.1). The empty space below the text would add to the
   card's padding, so the bottom edge looked wider than the sides. The button
   is pulled down by that space; an arrow-only button also to the left, so the
   arrow lines up with the text above. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="actions"] {
  --_btn: 2rem;
  --_ink: 0.77rem;

  margin-bottom: calc((var(--_ink) - var(--_btn)) / 2);
}

.TsvLA8kGzKoFtvuHbPgD[data-action="arrow"] > [data-part="main"] > [data-part="actions"] {
  --_ink: 0.55rem;
}

.TsvLA8kGzKoFtvuHbPgD[data-action="arrow"]:not([data-align="center"]) > [data-part="main"] > [data-part="actions"] {
  margin-left: calc((var(--_ink) - var(--_btn)) / 2);
}

:is(.TsvLA8kGzKoFtvuHbPgD > [data-part="icon"], .TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] > [data-part="icon"]) {
  display: flex;
  flex: none;
  align-items: center;
  height: var(--_icon);
}

:is(.TsvLA8kGzKoFtvuHbPgD > [data-part="icon"], .TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="head"] > [data-part="icon"]) img {
  display: block;
  width: auto;
  height: 100%;
}

/* ---------- Rich text ----------
   The card's own text styles, like .tt-tile-rte on the live site. */

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] {
  margin-top: var(--_text-gap, 0.35em);
  color: var(--tt-text-color);
  font-size: var(--_text);
  line-height: var(--_text-lh);
}

/* Text and Rich text may arrive wrapped (Webflow can put the rich text in its
   own element), so spacing targets the text blocks themselves. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote) {
  margin: 0;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote) + :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote),
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] > p + * {
  margin-top: 0.5em;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] :is(h2, h3, h4, h5, h6) {
  color: var(--tt-heading-color);
  font-size: 1em;
  line-height: 1.3;
  font-weight: 600;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] :is(ul, ol) {
  padding-left: 1.2em;
}

/* Tight lists: items sit close together, the list keeps its distance to
   paragraphs (0.5em, see above). */
.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] li {
  line-height: 1.35;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] li + li {
  margin-top: 0.1em;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="main"] > [data-part="text"] strong {
  color: var(--tt-heading-color);
  font-weight: 600;
}

/* Platform list: purple dots instead of bullets. */
.TsvLA8kGzKoFtvuHbPgD[data-list-style="platform"] > [data-part="main"] > [data-part="text"] ul {
  padding-left: 0;
  list-style: none;
}

.TsvLA8kGzKoFtvuHbPgD[data-list-style="platform"] > [data-part="main"] > [data-part="text"] ul li {
  position: relative;
  padding-left: 1rem;
}

.TsvLA8kGzKoFtvuHbPgD[data-list-style="platform"] > [data-part="main"] > [data-part="text"] ul li::before {
  content: "";
  position: absolute;
  top: calc(var(--_text-lh) * 0.5em);
  left: 0;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background-color: var(--purple-400, #a46bff);
  transform: translateY(-50%);
}

/* ---------- Media position ---------- */

/* Illustration: a large area that takes the free height, so text sits at
   the bottom and lines up across cards in a row. The image is never
   cropped; its height is three times the icon size. */
.TsvLA8kGzKoFtvuHbPgD > [data-part="illustration"] {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--_icon) * 3 + 4rem);
  padding: 1rem 0;
}

.TsvLA8kGzKoFtvuHbPgD > [data-part="illustration"] img {
  display: block;
  width: auto;
  max-width: 100%;
  height: calc(var(--_icon) * 3);
  object-fit: contain;
}

.TsvLA8kGzKoFtvuHbPgD[data-media="illustration"] > [data-part="main"] {
  flex: none;
}

.TsvLA8kGzKoFtvuHbPgD[data-media="icon-left"] {
  flex-direction: row;
  gap: 1.25rem;
}

/* ---------- Align ---------- */

.TsvLA8kGzKoFtvuHbPgD[data-align="center"] {
  align-items: center;
  text-align: center;
}

.TsvLA8kGzKoFtvuHbPgD[data-align="center"] > [data-part="main"] > [data-part="head"] > [data-part="title"] {
  align-items: center;
}

.TsvLA8kGzKoFtvuHbPgD[data-align="center"] > [data-part="main"] > [data-part="actions"] {
  justify-content: center;
}

.TsvLA8kGzKoFtvuHbPgD[data-align="center"] > [data-part="main"] {
  align-self: stretch;
}

.TsvLA8kGzKoFtvuHbPgD[data-align="center"] > [data-part="main"] > [data-part="text"] :is(ul, ol) {
  display: inline-block;
  text-align: left;
}