/* Home page only. Logical properties only (RTL-first). */

/* Why-FALCO over the courier photo (courier on the inline-end side of the
   image). Wide screens: copy and features keep to the inline-start ~60% on a
   gradient scrim, so the courier and his bag stay clear on the other side.
   Phones: the photo is a band at the top, features sit on solid ink below. */
.home-why .home-why__tagline { margin-inline-start: 0; margin-inline-end: auto; }

@media (min-width: 1024px) {
  /* The section is taller than the 3.2:1 photo, so cover zooms it; pull the crop
     to the courier's edge so the FALCO bag is not cut. Overrides the slot's
     inline focal point, hence !important. */
  [dir='rtl'] .home-why .section__bg { object-position: 4% 50% !important; }
  [dir='ltr'] .home-why .section__bg { object-position: 96% 50% !important; }
  .home-why .section--image__inner > * { max-width: 62%; }
  .home-why .features--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-6); }
  .home-why .features--5 .feature--divided:nth-child(3n + 1) { border-inline-start: 0; padding-inline-start: 0; }
  .home-why .section__scrim { background: linear-gradient(to right, rgba(5, 7, 11, 0.94) 0%, rgba(5, 7, 11, 0.86) 42%, rgba(5, 7, 11, 0.45) 60%, rgba(5, 7, 11, 0.08) 78%, rgba(5, 7, 11, 0) 100%); }
  [dir='rtl'] .home-why .section__scrim { background: linear-gradient(to left, rgba(5, 7, 11, 0.94) 0%, rgba(5, 7, 11, 0.86) 42%, rgba(5, 7, 11, 0.45) 60%, rgba(5, 7, 11, 0.08) 78%, rgba(5, 7, 11, 0) 100%); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-why .features--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-6); }
  .home-why .features--5 .feature--divided:nth-child(3n + 1) { border-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 767px) {
  .home-why .section__bg { height: 240px; bottom: auto; }
  .home-why .section__scrim { background: linear-gradient(to bottom, rgba(5, 7, 11, 0.05) 0, rgba(5, 7, 11, 0.3) 130px, rgba(5, 7, 11, 0.9) 210px, var(--ink-950) 240px); }
  .home-why .section--image__inner { padding-block-start: 170px; }
}

.home-eco .eco-app__text { text-align: start; }
