/* Home page – page-specific layout (the reference for static/css/pages/<key>.css). */

.home-why { padding-top: 26px; }
.home-why .section-head { margin-bottom: 20px; }
.home-why__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; }
.home-why__card .card__title { margin-bottom: 30px; }
.home-why__card .card__text p { margin-bottom: 1.2em; }
.home-why__card .card__text p:last-child { margin-bottom: 0; }

/* row 1: PriceRunner card spans both columns, image runs off the bottom edge */
.home-why__card--pricerunner {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start;
  padding-bottom: 0;
}
.home-why__card--pricerunner .home-why__text { padding-bottom: 40px; padding-top: 10px; }
.home-why__media--pricerunner { margin-left: 30px; margin-right: -44px; margin-top: 5px; height: 380px; overflow: hidden; }
.home-why__media--pricerunner img { width: 100%; height: auto; }

/* row 2 left: illustration bleeds off the bottom */
.home-why__card--more { display: flex; flex-direction: column; padding-bottom: 0; }
.home-why__media--process { margin-top: 10px; }
.home-why__media--process img { width: 100%; margin-bottom: -25%; }

/* row 2 right: logo strip touches the top and side edges */
.home-why__media--logos { margin: calc(-1 * var(--card-pad-y) - 20px) calc(-1 * var(--card-pad-x) - 40px) 20px; }
.home-why__media--logos img { width: 100%; }
.home-why__list { margin-top: 20px; font-size: var(--fs-body); }

@media (max-width: 991px) {
  .home-why__media--pricerunner { height: 320px; margin-right: -40px; }
}
@media (max-width: 767px) {
  .home-why__grid { grid-template-columns: minmax(0, 1fr); }
  .home-why__card--pricerunner { grid-template-columns: minmax(0, 1fr); }
  .home-why__card--pricerunner .home-why__text { padding-bottom: 24px; }
  .home-why__media--pricerunner { margin: 0 calc(-1 * var(--card-pad-x)); height: auto; max-height: 360px; }
  .home-why__media--process img { width: 90%; margin-bottom: -16%; }
  .home-why__media--logos { margin: calc(-1 * var(--card-pad-y) - 10px) calc(-1 * var(--card-pad-x) - 20px) 16px; }
}