/* ARABIDS v1.2.99 — calm homepage sections aligned with FAQ v1.2.98.
   Preserves the original three steps, three benefits and four app slides. */

/* Shared headings mirror the restrained accent and hierarchy of the FAQ. */
html body.home :is(.core_benefits_section,.who_its_for_section,.how_it_works_section) h2.title,
html body[data-page="home"] :is(.core_benefits_section,.who_its_for_section,.how_it_works_section) h2.title {
  display: block !important;
  margin: 0 0 clamp(29px,3vw,42px) !important;
  color: #143328 !important;
  font-family: inherit !important;
  font-size: clamp(29px,3vw,39px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
}
html body.home :is(.core_benefits_section,.who_its_for_section,.how_it_works_section) h2.title::before,
html body[data-page="home"] :is(.core_benefits_section,.who_its_for_section,.how_it_works_section) h2.title::before {
  content: "";
  display: block;
  width: 45px;
  height: 4px;
  margin: 0 auto 15px;
  border-radius: 10px;
  background: #a4865d;
}

/* 1 — HOW ARABIDS WORKS: ordered, evenly balanced visual steps. */
html body.home .core_benefits_section,
html body[data-page="home"] .core_benefits_section {
  padding: clamp(64px,6vw,86px) 0 !important;
  background: linear-gradient(180deg,#fffdfa 0%,#f7f1e8 100%) !important;
  border-top: 1px solid #e7ddcf !important;
  border-bottom: 1px solid #e5d8c6 !important;
}
html body.home .core_benefits_section .flex,
html body[data-page="home"] .core_benefits_section .flex {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 0 !important;
}
html body.home .core_benefits_section .flex > .item,
html body[data-page="home"] .core_benefits_section .flex > .item {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 262px !important;
  margin: 0 !important;
  padding: 27px 27px 26px !important;
  background: #fffefa !important;
  border: 1px solid #dfd1bc !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(20,51,40,.055) !important;
  text-align: start !important;
  transition: border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
html body.home .core_benefits_section .flex > .item:hover,
html body[data-page="home"] .core_benefits_section .flex > .item:hover {
  border-color: #c5ab87 !important;
  box-shadow: 0 17px 32px rgba(20,51,40,.08) !important;
  transform: translateY(-2px);
}
html body.home .core_benefits_section .item .image,
html body[data-page="home"] .core_benefits_section .item .image {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 76px !important;
  padding: 13px !important;
  margin: 0 0 23px !important;
  border-radius: 22px !important;
  background: #efe5d6 !important;
  border: 1px solid #e3d2b9 !important;
}
html body.home .core_benefits_section .item .image img,
html body[data-page="home"] .core_benefits_section .item .image img {
  display: block !important;
  width: 47px !important;
  height: 47px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
html body.home .core_benefits_section .item:nth-child(2) .image,
html body[data-page="home"] .core_benefits_section .item:nth-child(2) .image { background: #e9eee8 !important; border-color: #d8e2d6 !important; }
html body.home .core_benefits_section .item:nth-child(3) .image,
html body[data-page="home"] .core_benefits_section .item:nth-child(3) .image { background: #f1e6e0 !important; border-color: #e8d2c8 !important; }
html body.home .core_benefits_section .item .title,
html body[data-page="home"] .core_benefits_section .item .title {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  color: #143328 !important;
  font-family: inherit !important;
  font-size: clamp(18px,1.65vw,23px) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: start !important;
  text-transform: none !important;
}
html body.home .core_benefits_section .item .title > span,
html body[data-page="home"] .core_benefits_section .item .title > span {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 37px !important;
  width: 37px !important;
  height: 37px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  color: #fff9ef !important;
  background: #143328 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
html body.home .core_benefits_section .item:nth-child(2) .title > span,
html body[data-page="home"] .core_benefits_section .item:nth-child(2) .title > span { background: #420b07 !important; }
html body.home .core_benefits_section .item:nth-child(3) .title > span,
html body[data-page="home"] .core_benefits_section .item:nth-child(3) .title > span { background: #987750 !important; }
html body.home .core_benefits_section .item .subtitle,
html body[data-page="home"] .core_benefits_section .item .subtitle {
  display: block !important;
  margin: 0 !important;
  color: #4e6658 !important;
  font-family: inherit !important;
  font-size: clamp(14px,1.18vw,16px) !important;
  font-weight: 450 !important;
  line-height: 1.85 !important;
  text-align: start !important;
}

/* 2 — WHY CHOOSE ARABIDS: trustworthy, clear benefits with original icons. */
html body.home .who_its_for_section,
html body[data-page="home"] .who_its_for_section {
  position: relative !important;
  padding: clamp(63px,6vw,85px) 0 !important;
  background: linear-gradient(165deg,#faf7f1,#fffdfa) !important;
  border-block: 1px solid #e8dfd3 !important;
}
html body.home .who_its_for_section::before,
html body.home .who_its_for_section::after,
html body[data-page="home"] .who_its_for_section::before,
html body[data-page="home"] .who_its_for_section::after { content: none !important; background-image: none !important; }
html body.home .who_its_for_section .flex-wrap,
html body[data-page="home"] .who_its_for_section .flex-wrap {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 0 !important;
}
html body.home .who_its_for_section .flex-wrap > .item,
html body[data-page="home"] .who_its_for_section .flex-wrap > .item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 220px !important;
  padding: 26px !important;
  margin: 0 !important;
  border: 1px solid #e1d4c3 !important;
  border-radius: 21px !important;
  background: #fffefa !important;
  box-shadow: 0 11px 27px rgba(20,51,40,.05) !important;
  text-align: start !important;
}
html body.home .who_its_for_section .item .flex,
html body[data-page="home"] .who_its_for_section .item .flex {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
}
html body.home .who_its_for_section .item .image,
html body[data-page="home"] .who_its_for_section .item .image {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 61px !important;
  width: 61px !important;
  height: 61px !important;
  padding: 12px !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border: 1px solid #e1ceb3 !important;
  background: #f0e5d4 !important;
}
html body.home .who_its_for_section .item .image img,
html body[data-page="home"] .who_its_for_section .item .image img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
html body.home .who_its_for_section .item:nth-child(2) .image,
html body[data-page="home"] .who_its_for_section .item:nth-child(2) .image { background: #e9eee8 !important; border-color: #d5ded3 !important; }
html body.home .who_its_for_section .item:nth-child(3) .image,
html body[data-page="home"] .who_its_for_section .item:nth-child(3) .image { background: #f1e7e3 !important; border-color: #e7d2c9 !important; }
html body.home .who_its_for_section .item .title,
html body[data-page="home"] .who_its_for_section .item .title {
  display: block !important;
  margin: 0 !important;
  color: #143328 !important;
  font-family: inherit !important;
  font-size: clamp(17px,1.5vw,21px) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: start !important;
  text-transform: none !important;
}
html body.home .who_its_for_section .item .subtitle,
html body[data-page="home"] .who_its_for_section .item .subtitle {
  display: block !important;
  margin: 0 !important;
  color: #53665a !important;
  font-family: inherit !important;
  font-size: clamp(14px,1.16vw,16px) !important;
  line-height: 1.85 !important;
  font-weight: 450 !important;
  text-align: start !important;
}

/* 3 — INSIDE THE APP: distinct readable captions, no extra logo repeats.
   Do not modify slide wrappers/transforms used by the original scroll feature. */
html body.home .how_it_works_section .how-it-works-slide-content,
html body[data-page="home"] .how_it_works_section .how-it-works-slide-content {
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: min(100%,570px) !important;
  min-width: 0 !important;
  min-height: 178px !important;
  height: auto !important;
  margin-inline: auto !important;
  padding: 24px 29px !important;
  border: 1px solid #d9c5a8 !important;
  border-radius: 22px !important;
  background: linear-gradient(130deg,#fffefa 0%,#f7f0e5 100%) !important;
  box-shadow: 0 15px 37px rgba(20,51,40,.09) !important;
  overflow: hidden !important;
  text-align: start !important;
}
html body.home .how_it_works_section .how-it-works-slide-content::after,
html body[data-page="home"] .how_it_works_section .how-it-works-slide-content::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,#143328,#a4865d 58%,#420b07);
  pointer-events: none;
}
html body.home .how_it_works_section .how-it-works-title,
html body[data-page="home"] .how_it_works_section .how-it-works-title {
  margin: 0 !important;
  color: #143328 !important;
  font-family: inherit !important;
  font-size: clamp(19px,1.85vw,25px) !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: start !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body.home .how_it_works_section .how-it-works-subtitle,
html body[data-page="home"] .how_it_works_section .how-it-works-subtitle {
  display: block !important;
  margin: 0 !important;
  color: #4b6354 !important;
  font-family: inherit !important;
  font-size: clamp(14px,1.25vw,17px) !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
  text-align: start !important;
  overflow-wrap: break-word;
}
html[dir="ltr"] body.home :is(.core_benefits_section,.who_its_for_section) :is(.item,.item .title,.item .subtitle),
html[dir="ltr"] body[data-page="home"] :is(.core_benefits_section,.who_its_for_section) :is(.item,.item .title,.item .subtitle),
html[dir="ltr"] body.home .how_it_works_section :is(.how-it-works-slide-content,.how-it-works-title,.how-it-works-subtitle),
html[dir="ltr"] body[data-page="home"] .how_it_works_section :is(.how-it-works-slide-content,.how-it-works-title,.how-it-works-subtitle) {
  direction: ltr !important;
  text-align: left !important;
}

@media(max-width:1050px) {
  html body.home .core_benefits_section .flex,
  html body[data-page="home"] .core_benefits_section .flex,
  html body.home .who_its_for_section .flex-wrap,
  html body[data-page="home"] .who_its_for_section .flex-wrap { gap: 13px !important; }
  html body.home .core_benefits_section .flex > .item,
  html body[data-page="home"] .core_benefits_section .flex > .item,
  html body.home .who_its_for_section .flex-wrap > .item,
  html body[data-page="home"] .who_its_for_section .flex-wrap > .item { padding: 22px 19px !important; }
}
@media(max-width:850px) {
  html body.home .core_benefits_section .flex,
  html body[data-page="home"] .core_benefits_section .flex,
  html body.home .who_its_for_section .flex-wrap,
  html body[data-page="home"] .who_its_for_section .flex-wrap { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html body.home .core_benefits_section .flex > .item:last-child,
  html body[data-page="home"] .core_benefits_section .flex > .item:last-child,
  html body.home .who_its_for_section .flex-wrap > .item:last-child,
  html body[data-page="home"] .who_its_for_section .flex-wrap > .item:last-child { grid-column: 1/-1 !important; min-height: 0 !important; }
}
@media(max-width:650px) {
  html body.home .core_benefits_section,
  html body.home .who_its_for_section,
  html body[data-page="home"] .core_benefits_section,
  html body[data-page="home"] .who_its_for_section { padding: 55px 0 !important; }
  html body.home .core_benefits_section .flex,
  html body[data-page="home"] .core_benefits_section .flex,
  html body.home .who_its_for_section .flex-wrap,
  html body[data-page="home"] .who_its_for_section .flex-wrap { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
  html body.home .core_benefits_section .flex > .item,
  html body[data-page="home"] .core_benefits_section .flex > .item,
  html body.home .who_its_for_section .flex-wrap > .item,
  html body[data-page="home"] .who_its_for_section .flex-wrap > .item { grid-column: 1 !important; min-height: 0 !important; padding: 22px 20px !important; }
  html body.home .core_benefits_section .item .image,
  html body[data-page="home"] .core_benefits_section .item .image { margin-bottom: 16px !important; }
  html body.home .how_it_works_section .how-it-works-slide-content,
  html body[data-page="home"] .how_it_works_section .how-it-works-slide-content {
    min-height: 148px !important;
    padding: 20px 21px !important;
    gap: 9px !important;
    border-radius: 18px !important;
    box-shadow: 0 9px 21px rgba(20,51,40,.07) !important;
  }
  html body.home .how_it_works_section .how-it-works-title,
  html body[data-page="home"] .how_it_works_section .how-it-works-title { font-size: 20px !important; }
  html body.home .how_it_works_section .how-it-works-subtitle,
  html body[data-page="home"] .how_it_works_section .how-it-works-subtitle { font-size: 14px !important; }
}
@media(prefers-reduced-motion:reduce) {
  html body.home .core_benefits_section .flex > .item,
  html body[data-page="home"] .core_benefits_section .flex > .item { transition:none !important; }
  html body.home .core_benefits_section .flex > .item:hover,
  html body[data-page="home"] .core_benefits_section .flex > .item:hover { transform:none !important; }
}
