/* Keep secondary chapters spacious without stretching every section equally. */
.section--why-help {
  background: var(--color-section-slate);
  border-top: 1px solid var(--color-line);
  --section-pad: clamp(72px, 8vw, 112px);
}
/* Intro stays beside the list on wide screens, so the heading never floats
   alone; each row pairs one everyday problem with what changes. */
.contrast {
  display: grid;
  gap: 48px;
}
.contrast__intro h2 {
  font-size: clamp(34px, 3.4vw, 50px);
}
.contrast__intro .lead {
  max-width: 520px;
  margin-top: 24px;
}
.contrast__intro .text-link {
  margin-top: 32px;
}
.contrast__legend {
  display: none;
}
.contrast__list {
  display: grid;
  gap: 16px;
  list-style: none;
}
/* Each row turns from a pale "before" into a dark "after": the change is
   readable at a glance. */
.contrast-row {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color var(--transition);
}
.contrast-row:hover {
  border-color: var(--color-line-strong);
}
.contrast-row__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 22px 0;
}
.contrast-row__index {
  color: var(--color-accent-text);
  font: 500 15px/1 var(--font-heading);
  letter-spacing: 0.04em;
}
.contrast-row__head h3 {
  font-size: 22px;
  font-weight: 500;
}
.contrast-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--color-muted);
  font: 500 11px/1.4 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contrast-row__label .icon {
  width: 15px;
  height: 15px;
}
.contrast-row__before {
  padding: 16px 22px 24px;
  color: var(--color-muted);
  font-size: 15px;
}
.contrast-row__after {
  position: relative;
  padding: 32px 22px 26px;
  background: var(--color-ink);
  color: var(--color-white);
  font: 500 19px/1.45 var(--font-heading);
}
.contrast-row__after .contrast-row__label {
  color: var(--color-accent-soft);
}
.contrast-row__arrow {
  position: absolute;
  top: -16px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-ink);
  transform: rotate(90deg);
}
.contrast-row__arrow .icon {
  width: 16px;
  height: 16px;
}
@media (min-width: 1024px) {
  .contrast {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
  }
  .contrast__intro {
    position: sticky;
    top: calc(var(--header-height) + 48px);
    padding-top: 8px;
  }
}
@media (min-width: 1280px) {
  .contrast {
    gap: 96px;
  }
}
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) {
  .contrast__legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-bottom: 16px;
    font: 500 11px/1.4 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .contrast__legend > span:first-child {
    padding-left: 31px;
    color: var(--color-muted);
  }
  .contrast__legend > span:last-child {
    padding-left: 39px;
    color: var(--color-accent-text);
  }
  .contrast-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .contrast-row__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .contrast-row__head {
    padding: 28px 36px 0 30px;
  }
  .contrast-row__before {
    grid-column: 1;
    padding: 12px 36px 30px 30px;
  }
  .contrast-row__after {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 30px 28px 38px;
  }
  .contrast-row__arrow {
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
  }
}