
.crs-checks {
  --chk-fill: #004e80;
  --chk-on-fill: #fff;
  --chk-arm: #004e80;
  --chk-tone: #0e67a1;
  --chk-ink: #0f172a;
  --chk-bg: #f4f7fa;
  --chk-rule: #e5eaf0;
  --chk-edge: #d6e0ea;
  --chk-edge-hover: #a9c3da;
  --chk-shadow: none;
  --chk-geo: rgba(0, 78, 128, 0.12);
  --chk-geo-faint: rgba(0, 78, 128, 0.065);
  --chk-geo-accent: rgba(14, 103, 161, 0.22);
  --chk-block: 72px;
  --chk-cut: 18px;
  position: relative;

  overflow: hidden;
  isolation: isolate;
  background: var(--chk-bg);
  border-top: 1px solid var(--chk-rule);
  padding: 96px 0 104px;
}
.crs-checks__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.crs-checks__geo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.crs-checks__geo svg {
  position: absolute;
  max-width: none;
  overflow: visible;
}

.crs-checks__geo-l {
  top: 40px;
  left: max(-300px, calc((100% - 1160px) / 2 - 290px));
  width: 420px;
  height: 520px;
}

.crs-checks__geo-tr {
  top: 28px;
  right: max(16px, calc((100% - 1160px) / 2 + 12px));
  width: 260px;
  height: 160px;
}
.crs-checks__geo .g {
  fill: none;
  stroke: var(--chk-geo);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}
.crs-checks__geo .g--faint {
  stroke: var(--chk-geo-faint);
}
.crs-checks__geo .g--accent {
  stroke: var(--chk-geo-accent);
}

.crs-checks__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  margin-bottom: 36px;
  max-width: none;
}
.crs-checks__head .crs-eyebrow {
  flex-basis: 100%;
}
.crs-checks__title {
  color: var(--chk-ink);
}
.crs-checks__dash {
  flex: none;
  width: 48px;
  height: 22px;
  margin-top: 4px;
  overflow: visible;
}
.crs-checks__dash line {
  stroke: var(--chk-tone);
  stroke-width: 3;
}

.crs-checks__cell--head {
  display: flex;
  align-items: flex-end;
}
.crs-checks__cell--head .crs-checks__head {
  margin-bottom: 4px;
}

.crs-checks__grid {
  --grid-gutter-x: 24px;
  --grid-gutter-y: 16px;
}

.crs-checks__card {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 100px;
  padding: 18px 26px 18px calc(var(--chk-block) + 36px);
  background: #fff;
  border: 1px solid var(--chk-edge);
  box-shadow: var(--chk-shadow);
  transition: border-color 0.2s ease;
  cursor: default;
}
.crs-checks__block {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: var(--chk-block);
  background: var(--chk-fill);
  clip-path: polygon(0 0, calc(100% - var(--chk-cut)) 0, 100% var(--chk-cut), 100% 100%, 0 100%);
}
.crs-checks__mark {
  position: absolute;
  left: -1px;
  top: 50%;

  width: calc(var(--chk-block) * 1.5);
  height: calc(var(--chk-block) * 0.875);
  transform: translateY(-50%);
  overflow: visible;
}
.crs-checks__mark polyline {
  fill: none;
  stroke-width: 8;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
}
.crs-checks__mark-in {
  stroke: var(--chk-on-fill);
}
.crs-checks__mark-out {
  stroke: var(--chk-arm);
}
.crs-checks__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--chk-ink);
  text-wrap: pretty;
}

.crs-checks__text::first-letter {
  text-transform: uppercase;
}
@media (hover: hover) {
  .crs-checks__card:hover {
    border-color: var(--chk-edge-hover);
  }
}

.crs-checks--project {
  --chk-bg: #fff;
  --chk-rule: rgb(229, 231, 235);
  --chk-edge: #dfe5ec;
  --chk-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 88px 0;
}

@media (max-width: 1199px) {
  .crs-checks__text {
    font-size: 17px;
  }

  .crs-checks--project .crs-checks__geo-l {
    display: none;
  }
}

@media (max-width: 991px) {
  .crs-checks {
    --chk-block: 58px;
    --chk-cut: 14px;
  }
  .crs-checks__card {
    min-height: 88px;
    padding: 16px 18px 16px calc(var(--chk-block) + 28px);
  }
  .crs-checks__text {
    font-size: 16.5px;
  }
}
@media (max-width: 767px) {
  .crs-checks {
    --chk-block: 52px;
    --chk-cut: 12px;
    padding: 64px 0 72px;
  }
  .crs-checks__grid {
    --grid-gutter-y: 12px;
  }
  .crs-checks__card {
    min-height: 80px;
    padding: 16px 18px 16px calc(var(--chk-block) + 26px);
  }
  .crs-checks__head {
    margin-bottom: 28px;
  }
  .crs-checks__cell--head .crs-checks__head {
    margin-bottom: 12px;
  }

  .crs-checks__geo-tr {
    width: 180px;
    height: 111px;
    right: -40px;
    top: 12px;
  }
  .crs-checks__geo-l {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crs-checks__card {
    transition: none;
  }
}
