.z5kx {
  --z5kx-bg: #101111;
  --z5kx-ink: #fff;
  --z5kx-muted: rgba(255, 255, 255, .55);
  --z5kx-line: rgba(255, 255, 255, .14);
  --z5kx-accent: #e1282e;
  position: relative;
  overflow: hidden;
  color: var(--z5kx-ink);
  background: var(--z5kx-bg);
}

.z5kx,
.z5kx * { box-sizing: border-box; }
.z5kx a { color: inherit; text-decoration: none; }
.z5kx__container { width: 100%; margin: 0 auto; }

.z5kx__header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 58px);
}

.z5kx__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -10px;
  color: var(--z5kx-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.z5kx__heading {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 5.3rem);
  font-weight: 650;
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.z5kx__intro {
  max-width: 50ch;
  margin: 0;
  color: var(--z5kx-muted);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.55;
}

.z5kx__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--z5kx-line);
  background: rgba(255, 255, 255, .012);
  isolation: isolate;
}

.z5kx__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.z5kx__card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--z5kx-line);
  color: inherit;
  background: transparent;
  outline: 0;
}

.z5kx__card:first-child { border-left: 0; }
.z5kx__card[href] { cursor: pointer; }

.z5kx__card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  transition: transform .65s cubic-bezier(.625, .05, 0, 1);
}

.z5kx__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  gap: 18px;
}

.z5kx__index {
  color: rgba(255, 255, 255, .34);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .19em;
  font-variant-numeric: tabular-nums;
}

.z5kx__icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: rgba(255, 255, 255, .58);
  transition: color .45s ease, transform .65s cubic-bezier(.625, .05, 0, 1);
}

.z5kx__icon svg,
.z5kx__icon i {
  width: 100%;
  height: 100%;
  color: currentColor;
  fill: currentColor;
  font-size: 22px;
}

.z5kx__content { margin-top: auto; }
.z5kx__value-row { display: flex; align-items: center; gap: 12px; white-space: nowrap; }

.z5kx__value {
  color: #fff;
  font-size: clamp(3rem, 4.4vw, 5.1rem);
  font-weight: 620;
  line-height: .84;
  letter-spacing: -.066em;
  font-variant-numeric: tabular-nums;
}

.z5kx__suffix { display: inline-block; margin-left: .035em; font-size: .52em; letter-spacing: -.035em; }
.z5kx__prefix { display: inline-block; }

.z5kx__star {
  width: clamp(30px, 2.8vw, 44px);
  height: clamp(30px, 2.8vw, 44px);
  flex: 0 0 auto;
  color: var(--z5kx-accent);
  transform-origin: 50% 58%;
}

.z5kx__label {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(1rem, 1.15vw, 1.22rem);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.z5kx__microcopy {
  max-width: 27ch;
  margin: 8px 0 0;
  color: var(--z5kx-muted);
  font-size: 10px;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.z5kx__wash {
  position: absolute;
  z-index: 0;
  inset: -1px;
  opacity: 0;
  background: radial-gradient(330px circle at var(--mx) var(--my), rgba(225, 40, 46, .16), rgba(225, 40, 46, .045) 38%, transparent 70%);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.625, .05, 0, 1);
}

.z5kx__active-line {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--z5kx-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.625, .05, 0, 1);
}

.z5kx[data-hover="true"] .z5kx__card:is(:hover, :focus-visible, [data-active="true"]) .z5kx__wash { opacity: 1; }
.z5kx[data-hover="true"] .z5kx__card:is(:hover, :focus-visible, [data-active="true"]) .z5kx__active-line { transform: scaleX(1); }
.z5kx[data-hover="true"] .z5kx__card:is(:hover, :focus-visible, [data-active="true"]) .z5kx__card-inner { transform: translateY(-5px); }
.z5kx[data-hover="true"] .z5kx__card:is(:hover, :focus-visible, [data-active="true"]) .z5kx__icon { color: var(--z5kx-accent); transform: rotate(6deg); }
.z5kx__card:focus-visible { box-shadow: inset 0 0 0 2px var(--z5kx-accent); }

.z5kx__mobile-progress { display: none; }

.z5kx__rail {
  position: relative;
  z-index: 4;
  display: block;
  overflow: hidden;
  border-top: 1px solid var(--z5kx-line);
  color: #fff;
  background: var(--z5kx-accent);
  outline: 0;
}

.z5kx__rail-viewport { overflow: hidden; }
.z5kx__rail-track { display: flex; width: max-content; min-width: 100%; align-items: center; justify-content: center; }

.z5kx__rail-copy {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 24px);
  white-space: nowrap;
  font-size: clamp(.84rem, 1.1vw, 1.05rem);
  line-height: 1.15;
  letter-spacing: -.012em;
}

.z5kx__rail-copy strong { font-weight: 730; }
.z5kx__rail-rule { width: clamp(24px, 3vw, 48px); height: 1px; flex: 0 0 auto; background: currentColor; opacity: .48; }

.z5kx__rail-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  transition: transform .45s cubic-bezier(.625, .05, 0, 1);
}

.z5kx__rail-icon svg,
.z5kx__rail-icon i { width: 100%; height: 100%; color: currentColor; fill: currentColor; font-size: 18px; }
.z5kx__rail[href]:is(:hover, :focus-visible) .z5kx__rail-icon { transform: translateX(6px); }
.z5kx__rail:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.z5kx__pulse { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.z5kx__rail--ticker .z5kx__rail-track { justify-content: flex-start; }
.z5kx__rail--ticker .z5kx__rail-copy { padding-right: clamp(70px, 9vw, 150px); }

@media (max-width: 1024px) {
  .z5kx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z5kx__card:nth-child(odd) { border-left: 0; }
  .z5kx__card:nth-child(n + 3) { border-top: 1px solid var(--z5kx-line); }
  .z5kx__value { font-size: clamp(3.2rem, 8vw, 5rem); }
}

@media (max-width: 767px) {
  .z5kx__header { display: block; margin-bottom: 30px; }
  .z5kx__eyebrow { margin-bottom: 14px; }
  .z5kx__heading { max-width: 10ch; font-size: clamp(2.35rem, 12vw, 4rem); }
  .z5kx__intro { margin-top: 20px; }
  .z5kx__value { font-size: clamp(2.3rem, 12vw, 3.7rem); }
  .z5kx__label { font-size: .96rem; }
  .z5kx__microcopy { font-size: 8px; }
  .z5kx__star { width: 27px; height: 27px; }

  .z5kx--mobile-grid .z5kx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z5kx--mobile-grid .z5kx__card:nth-child(odd) { border-left: 0; }
  .z5kx--mobile-grid .z5kx__card:nth-child(n + 3) { border-top: 1px solid var(--z5kx-line); }

  .z5kx--mobile-stack .z5kx__grid { grid-template-columns: 1fr; }
  .z5kx--mobile-stack .z5kx__card { border-top: 1px solid var(--z5kx-line); border-left: 0; }
  .z5kx--mobile-stack .z5kx__card:first-child { border-top: 0; }

  .z5kx--mobile-swipe .z5kx__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .z5kx--mobile-swipe .z5kx__grid::-webkit-scrollbar { display: none; }
  .z5kx--mobile-swipe .z5kx__card {
    width: min(82vw, 330px);
    flex: 0 0 min(82vw, 330px);
    border-top: 0;
    border-left: 1px solid var(--z5kx-line);
    scroll-snap-align: start;
  }
  .z5kx--mobile-swipe .z5kx__card:first-child { border-left: 0; }
  .z5kx--mobile-swipe .z5kx__mobile-progress { display: block; height: 2px; background: var(--z5kx-line); }
  .z5kx--mobile-swipe .z5kx__mobile-progress span { display: block; width: 100%; height: 100%; background: var(--z5kx-accent); transform: scaleX(.08); transform-origin: left center; }

  .z5kx__rail-track { justify-content: flex-start; }
  .z5kx__rail-copy { justify-content: flex-start; white-space: normal; }
  .z5kx__rail--ticker .z5kx__rail-copy { white-space: nowrap; }
  .z5kx__rail-rule { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .z5kx * { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}