/* Home page */

/* Hero */
.hero { padding-top: 120px; overflow: hidden; }
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 62px;
  padding-top: 60px;
}
.hero__text {
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 800px;
  text-align: center;
}
.hero__title,
.hero__lede { width: 100%; }
.hero__lede { color: var(--ink-2); font-kerning: none; }
.hero__image {
  will-change: transform;
  width: 800px;
  height: 600px;
  object-fit: contain;
}

/* Statement with inline image pills */
.statement { background: var(--paper-2); overflow: hidden; }
.statement__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 160px 0;
  text-align: center;
}
.statement__pill {
  width: 98px;
  height: 52px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.statement__pill--narrow { width: 90px; height: 50px; }

/* Feature rows: text beside a parallax image */
.feature { overflow: hidden; }
.feature__inner {
  display: flex;
  gap: 62px;
  padding-bottom: 160px;
}
.feature--first .feature__inner { padding-top: 160px; }
.feature--reverse .feature__inner { flex-direction: row-reverse; }
.feature__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 42px;
  min-width: 0;
}
.feature__title--last { margin-bottom: 42px; }
.feature__body--center { text-align: center; }
.feature__media {
  flex: 1 1 0;
  height: 600px;
  min-width: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.feature__parallax {
  display: block;
  width: 100%;
  will-change: transform;
}
.feature__parallax--119 { height: 119%; }
.feature__parallax--128 { height: 128%; }
.feature__parallax--127 { height: 127%; }
.feature__parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Why us */
.why__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding-bottom: 160px;
}
.why__head {
  display: flex;
  gap: 10px;
}
.why__intro,
.why__lede { flex: 1 1 0; min-width: 0; }
.why__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.why__intro .t-h3 { align-self: stretch; }
.why__lede { align-self: flex-end; text-align: right; }
.why__cards {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
  min-width: 0;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--paper-2);
}
.card__text { display: flex; flex-direction: column; gap: 16px; }
.card__title { font-weight: 700; }
.card__body { color: var(--ink-2); }

/* Product gallery */
.showcase__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding-bottom: 160px;
}
.showcase__head { height: 44px; }
.gallery {
  position: relative;
  height: 760px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.gallery__slides,
.gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gallery__slide {
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--spring-dur) var(--spring);
}
.gallery__slide.is-active { opacity: 1; }
.gallery__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(84, 84, 84, 0) 100%);
}
.gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 126px;
  padding: 32px;
}
.gallery__thumb {
  position: relative;
  width: 62px;
  height: 36px;
  border-radius: var(--radius-pill);
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity var(--spring-dur) var(--spring);
}
.gallery__thumb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--paper);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--spring-dur) var(--spring);
}
.gallery__thumb.is-active img { opacity: 1; }
.gallery__thumb.is-active::after { opacity: 1; }

/* FAQ */
.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 62px;
  padding-bottom: 160px;
}
.faq__intro {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  gap: 62px;
  min-width: 0;
}
.faq__list {
  flex: 3 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.faq__item {
  padding: 16px 16px 24px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.faq__question {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.faq__question .t-h5 { flex: 1 1 0; color: var(--ink); }
.faq__caret {
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform var(--spring-dur) var(--spring);
}
.faq__item.is-open .faq__caret { transform: rotate(180deg); }
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--spring-dur) var(--spring);
}
.faq__answer > div { overflow: hidden; }
.faq__answer p { padding-top: 24px; color: var(--ink); }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }

/* Tablet */
@media (max-width: 1439.98px) {
  .hero { padding-top: 80px; }

  .statement__inner { padding: 120px 0; }

  .feature__inner,
  .feature--reverse .feature__inner { flex-direction: column-reverse; gap: 32px; padding-bottom: 120px; }
  .feature--first .feature__inner,
  .feature--education .feature__inner { padding-top: 120px; }
  .feature__text { flex: none; gap: 24px; }
  .feature__title--last { margin-bottom: 24px; }
  .feature__media { flex: none; width: 100%; }

  .why__inner { padding-bottom: 120px; }
  .why__head { gap: 32px; }
  .why__cards { flex-direction: column; align-items: stretch; }
  .card { flex: none; }

  .showcase__inner { padding-bottom: 120px; }
  .gallery { height: 580px; }
}

/* Mobile */
@media (max-width: 809.98px) {
  .hero__image { width: 100%; height: auto; aspect-ratio: 4 / 3; }

  .statement__inner { gap: 12px; padding: 62px 0; }
  .statement__pill,
  .statement__pill--narrow { width: 60px; height: 30px; }

  .feature__inner,
  .feature--reverse .feature__inner { padding-bottom: 80px; }
  .feature--first .feature__inner,
  .feature--education .feature__inner { padding-top: 80px; }
  .feature__media { height: 320px; }

  .why__inner { padding-bottom: 80px; }
  .why__head { flex-direction: column; gap: 24px; }
  .why__intro { gap: 24px; }
  .why__intro,
  .why__lede { flex: none; }
  .why__lede { align-self: stretch; text-align: left; }

  .showcase__inner { gap: 32px; padding-bottom: 80px; }
  .gallery { height: 275px; }

  .faq__inner { flex-direction: column; align-items: stretch; gap: 32px; padding-bottom: 80px; }
  .faq__intro { flex: none; gap: 24px; }
  .faq__list { flex: none; }
}