/* Screen 4, HERE COMES A NEW CHALLENGER!: vermilion interruption banner, then the 1v1 explained. */
.challenger { border-top: var(--line-lg) solid var(--ink); padding-top: clamp(56px, 7vw, 96px); overflow: hidden; }
.ch__banner {
  position: relative; margin: 0 calc(var(--gutter) * -1) clamp(48px, 6vw, 88px);
  padding: clamp(22px, 2.6vw, 36px) var(--gutter); background: var(--p2);
  border-block: var(--line-lg) solid var(--ink); transform: skewY(-3deg); visibility: hidden;
}
.ch__banner.is-on { visibility: visible; }
.ch__banner::before {
  content: ''; position: absolute; inset: 0; opacity: .2;
  background-image: radial-gradient(circle, var(--ink) 1.3px, transparent 1.7px); background-size: 9px 9px;
}
.ch__banner-text {
  position: relative; font-size: clamp(30px, 4.1vw, 66px); color: var(--chalk); white-space: nowrap;
  text-align: center;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink);
}
.ch__banner.is-on .ch__banner-text { animation: blink .18s steps(2, jump-none) 4 calc(var(--frame) * 14); }

.ch__body {
  max-width: 1344px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}
.ch__intro { grid-column: 1 / 7; display: grid; gap: 16px; align-content: start; }
.ch__title { font-size: clamp(38px, 4.6vw, 72px); }
.ch__lede { max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); }

.ch__card {
  grid-column: 7 / 13; align-self: start; padding: 20px 22px 18px; display: grid; gap: 16px;
  background: var(--ink); color: var(--chalk);
  border: var(--line-lg) solid var(--ink); box-shadow: var(--drop-lg) var(--drop-lg) 0 var(--p2);
}
.ch__from { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ch__from b { padding: 4px 7px 3px; background: var(--p2); font-weight: 400; }
.ch__five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ch__five li { display: grid; gap: 6px; justify-items: center; }
.ch__five span {
  width: 100%; aspect-ratio: 1; max-width: 84px; background-color: var(--chalk); background-repeat: no-repeat;
}
.ch__five b { font-size: 13px; font-stretch: 120%; margin-top: 4px; }
.ch__five i { font-size: 10px; font-style: normal; color: var(--yellow); }
.ch__meta { display: flex; gap: 8px; font-size: 11px; }
.ch__meta span { padding: 4px 8px 3px; border: 2px solid var(--ink-soft); }

.ch__steps {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit;
  counter-reset: s;
}
.ch__steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px 22px;
  background: var(--chalk); border: var(--line) solid var(--ink); box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.ch__n {
  display: grid; place-items: center; width: 52px; height: 52px; font-size: 30px;
  background: var(--p2); color: var(--chalk); border: var(--line) solid var(--ink);
}
.ch__steps p { display: grid; gap: 6px; font-size: 15px; }
.ch__steps b { font-size: 20px; font-weight: 900; font-stretch: 125%; font-style: italic; line-height: 1.1; }
.ch__cta { grid-column: 1 / -1; }