/* ===================== Shop Online (consumer) ===================== */
@import url("service.css");

/* ---------- hero: text on a chevron pattern + looping video ---------- */
.cs-hero {
  display: grid;
  grid-template-columns: 42.2% 1fr;
  align-items: start;
  background: var(--cream) url("../../assets/img/Scroll-Group-2-1.png") center / cover;
}
.cs-hero-text { padding: 75px 5.5vw 0 8vw; }
.cs-hero-text h1 { padding-bottom: 10px; font-size: 50px; font-weight: 700; line-height: 65px; color: #000000; }
.cs-hero-text p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.cs-hero-text p.cs-download { margin: 30px 0 3px; font-size: 20px; font-weight: 700; line-height: 30px; }
.cs-hero-text img { width: 175px; }
.cs-hero-video { padding-bottom: 7px; }
.cs-hero-video video { display: block; width: 100%; }

/* ---------- features over the product arc ---------- */
.cs-features {
  margin-top: 55px;
  padding: 270px 0 104px;
  background: var(--cream) url("../../assets/img/Group-4085.png") center top / contain no-repeat;
  text-align: center;
}
.cs-features h2 { padding-bottom: 10px; font-size: 50px; font-weight: 700; line-height: 60px; color: var(--ink-2); }
.cs-cats { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--ink); }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 83px; margin-top: 113px; text-align: left; }
.cs-item img { width: 100%; }
.cs-woman img { width: 459px; margin: 35px auto 0; }
.cs-item h3 { padding-bottom: 10px; font-size: 25px; font-weight: 600; line-height: 30px; color: var(--ink-2); }
.cs-item p { font-size: 14px; line-height: 21px; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.cs-faq { padding-top: 0; }
/* closed questions are more compact on this page */
.cs-faq .acc-item:not(.open) { padding-top: 10px; padding-bottom: 10px; }
.cs-faq .acc-steps .acc-a { padding-top: 34px; }
.cs-faq .acc-steps .acc-body { padding-right: 20px; }
.cs-faq .svc-faq-title { margin-bottom: 0; }
.cs-faq-sub { margin: 8px 0 32px; font-size: 14px; font-weight: 600; line-height: 21px; color: var(--ink); text-align: center; }

@media (max-width: 1279px) {
  .cs-hero-text br { display: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .cs-hero { grid-template-columns: 1fr; }
  .cs-hero-text { padding: 85px 0 37px; text-align: center; }
  .cs-hero-text h1 { font-size: 43px; line-height: 42px; }
  .cs-hero-text h1 br { display: none; }

  .cs-features { margin-top: 0; padding: 150px 0 100px; }
  .cs-features h2 { font-size: 30px; line-height: 36px; }
  .cs-features h2 br { display: none; }
  .cs-grid { grid-template-columns: 1fr; row-gap: 115px; margin-top: 81px; text-align: center; }
  .cs-woman { margin-bottom: -85px; }
  .cs-item.cs-woman img { width: 476px; margin-top: 0; }
  .cs-item img { width: 576px; margin: 0 auto; }
  .cs-item h3 { font-size: 26px; line-height: 31.2px; }
  .cs-item p br { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .cs-hero-text { padding: 50px 50px 37px; }
  .cs-hero-text h1 { font-size: 26px; line-height: 42px; }
  .cs-features { padding: 80px 0 100px; }
  .cs-features h2 { font-size: 25px; line-height: 30px; }
  .cs-cats br { display: none; }
  .cs-grid { row-gap: 50px; margin-top: 77px; }
  .cs-item img,
  .cs-woman { display: none; }
  .cs-item h3 { font-size: 22px; line-height: 26.4px; }
  .page-consumer .svc-faq-title { font-size: 22px; line-height: 28.6px; }
}