/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.MFwtkybDYFDI_arID3S3,
.MFwtkybDYFDI_arID3S3 *,
.MFwtkybDYFDI_arID3S3 *::before,
.MFwtkybDYFDI_arID3S3 *::after {
  box-sizing: border-box;
}

/*
 * The card: a 1px dashed grey outline (2px on, 2px off; 32px corners), 38px
 * by 32px in, on a dark section. A static panel — no link, no hover, not
 * focusable.
 */
.MFwtkybDYFDI_arID3S3 {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 380px;
  /* As tall as its grid cell, so the cards in a row match the tallest (in a Collection List the cell is the list item). */
  height: 100%;
  position: relative;
  padding: 38px 32px;
  border-radius: 32px;
  color: var(--text-inverse, #fff);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* The outline, drawn over the card's edge (a 1px line centred half a pixel in) — a CSS dashed border can't space its dashes evenly round a rounded corner. */
.exldl2JGFVR7QEHIeTLo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.exldl2JGFVR7QEHIeTLo rect {
  x: 0.5px;
  y: 0.5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  rx: 31.5px;
  fill: none;
  stroke: var(--border-default, #595959);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  transition: stroke 300ms ease;
}

/* The icon, the name and the description, 16px apart, from the top. */
.dQUw2LMYBd1lfUpC0RmD {
  flex: 1;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* A 39px icon (an uploaded image, already in brand blue). */
.t4_LMY6q3pOm87CtO6G0 {
  display: block;
  width: 39px;
  height: 39px;
  object-fit: contain;
}

/* Heading / S, Regular. */
.Q0SooOtOERS4SZ0Jist5 {
  margin: 0;
  font-size: var(--type-heading-s-size, 24px);
  font-weight: var(--type-weight-regular, 400);
  line-height: var(--type-heading-s-lh, 31px);
  letter-spacing: var(--type-heading-s-ls, 0);
  text-wrap: balance;
}

/* Body / Default. */
.bvc8VFtPKPtGukPmZW_Q {
  margin: 0;
  font-size: var(--type-default-size, 16px);
  font-weight: var(--type-default-weight, 400);
  line-height: var(--type-default-lh, 23px);
  letter-spacing: var(--type-default-ls, 0);
  text-wrap: pretty;
}

/*
 * Value style (About Phase2's values, the prototype's About .value): solid
 * soft black over the band's graphic, shorter, the icon at the top and the
 * name (Heading S, Medium) at the foot.
 */
.MFwtkybDYFDI_arID3S3[data-style='value'] {
  min-height: max(260px, 18vw);
  background: var(--text-primary, #171717);
}

.MFwtkybDYFDI_arID3S3[data-style='value'] .dQUw2LMYBd1lfUpC0RmD {
  align-self: stretch;
  justify-content: space-between;
  gap: max(40px, 3.7vw);
}

.MFwtkybDYFDI_arID3S3[data-style='value'] .Q0SooOtOERS4SZ0Jist5 {
  font-weight: 500;
  text-wrap: pretty;
}

/* Intro (data-shown, its own IntersectionObserver): the card rises and fades in, staggered by --c (revealOrder) among its siblings; plays back out each time it leaves the window. */
.MFwtkybDYFDI_arID3S3 {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity 400ms ease,
    translate 500ms ease;
}

.MFwtkybDYFDI_arID3S3[data-shown='true'] {
  opacity: 1;
  translate: none;
  transition:
    opacity 700ms ease calc(var(--c, 0) * 70ms),
    translate 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--c, 0) * 70ms);
}

/* The card only needs its full height to match a 4-up row; a narrower grid gives it room on its own. */
@media (max-width: 1280px) {
  .MFwtkybDYFDI_arID3S3 {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .MFwtkybDYFDI_arID3S3 {
    padding: 22px 24px;
    border-radius: 24px;
  }

  .MFwtkybDYFDI_arID3S3[data-style='value'] {
    min-height: 0;
    padding: 28px 24px;
  }

  .MFwtkybDYFDI_arID3S3[data-style='value'] .dQUw2LMYBd1lfUpC0RmD {
    gap: 24px;
  }

  .exldl2JGFVR7QEHIeTLo rect {
    rx: 23.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .MFwtkybDYFDI_arID3S3,
  .MFwtkybDYFDI_arID3S3[data-shown='true'] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}