/* ==========================================================================
   Buytac — homepage sections
   ========================================================================== */

/* ---------- oversized brand word above the spotlight ---------- */
.impact { padding-bottom: 0; }
.impact__word {
  font-size: clamp(2.75rem, 13vw, 4.0625rem);   /* reference caps this at 65px */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  color: var(--blue-500);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* ---------- five-up category strip ---------- */
.tiles--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) { .tiles--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .tiles--five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }

.tiles--five .tile { aspect-ratio: 4 / 5; background: var(--surface); }
.tiles--five .tile img { object-fit: contain; padding: 1.25rem; }
.tiles--five .tile::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.tiles--five .tile__label { font-size: 1rem; padding: 1.1rem; }

/* editorial tiles carry white text over photography — needs a deeper scrim */
.tile--tall { aspect-ratio: 4 / 5; }
.tile--tall::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85) 100%);
}
.tile--tall .tile__label { font-size: 1.375rem; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* ---------- media grid (video + still) ---------- */
.media-grid__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 899px) { .media-grid__layout { grid-template-columns: minmax(0, 1fr); } }

.media-grid__video,
.media-grid__still {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #1c1c1c;
  aspect-ratio: 16 / 9;
}
.media-grid__still img,
.media-grid__video img,
.media-grid__video iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}

.media-grid__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.media-grid__play::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .28);
  transition: background-color .25s var(--ease);
}
.media-grid__play:hover::after { background: rgba(0, 0, 0, .16); }

.media-grid__play-icon {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 76px; height: 76px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255, 255, 255, .92);
  display: grid; place-items: center;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.media-grid__play:hover .media-grid__play-icon { transform: translate(-50%, -50%) scale(1.07); background: #fff; }
.media-grid__play-icon::before {
  content: ''; display: block;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--text);
  margin-left: 5px;
}

/* ---------- about / final assembly split ---------- */
.about-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
@media (max-width: 899px) { .about-split__grid { grid-template-columns: minmax(0, 1fr); } }

.about-split__media img {
  width: 100%; height: auto; border-radius: var(--radius-card);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.about-split__body h2 { margin-bottom: 1rem; }
.about-split__body h3 { font-size: var(--h5); margin-top: 2rem; }
.about-split__body p { color: var(--text-soft); max-width: 62ch; }
.about-split__body .btn { margin-top: 1rem; }

/* ---------- carousel heading row ---------- */
.carousel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.carousel-head h2 { margin: 0; }

/* Percentage grid tracks resolve against an indefinite size inside a scroll
   container, so `100%` came out about a third. Flex gives flex-basis a
   definite reference and pins each testimonial to the full width. */
.carousel__track--full {
  display: flex !important;
  grid-auto-columns: unset !important;
}
.carousel__track--full > * { flex: 0 0 100%; min-width: 0; max-width: none; }
/* the readable cap belongs on the content, not on the slide itself, or the
   slide stops filling the track and two show at once */
.carousel__track--full > .testimonial > * { max-width: 60rem; margin-inline: auto; }
.carousel__nav--center { justify-content: center; margin-top: 2rem; }

.testimonial { list-style: none; }
.testimonial__quote {
  margin: 0 0 1.25rem; padding: 0; border: 0; background: none; font-style: normal;
}

/* ---------- spotlight product shot ---------- */
.spotlight-figure { margin: 0; text-align: center; }
.spotlight-figure a { display: inline-block; transition: transform .45s var(--ease-out-quint); }
.spotlight-figure a:hover { transform: translateY(-6px) scale(1.02); }
.spotlight-figure img {
  display: inline-block; width: auto; max-width: min(100%, 860px);
  max-height: 420px; object-fit: contain;
}

/* ==========================================================================
   Comparison card — matches the reference: white panel, no dark header row,
   product thumbs with View buttons, hairline rules between spec rows.
   ========================================================================== */
.compare-intro { max-width: 46rem; }
.compare-intro p { color: var(--text-soft); margin-bottom: 1.5rem; }

.compare-card {
  background: var(--surface);
  border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.compare-card .compare { background: transparent; border-radius: 0; }

.compare-card .compare thead th {
  background: transparent;
  color: var(--text);
  vertical-align: top;
  padding: .5rem 1.25rem 2rem;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.compare-card .compare thead th:first-child { width: 18%; }

.compare-product { display: block; color: var(--text); }
.compare-product__media { display: block; margin-bottom: 1rem; }
.compare-product__media img {
  width: 100%; max-width: 190px; height: auto;
  aspect-ratio: 16 / 10; object-fit: contain;
}
.compare-product__name {
  display: block; font-size: .9375rem; font-weight: 700;
  line-height: 1.35; margin-bottom: .35rem;
}
.compare-product__price { display: block; font-size: .9375rem; color: var(--text-soft); margin-bottom: 1rem; }
.compare-product:hover .compare-product__name { color: var(--blue-500); }

.btn--soft { background: var(--surface-alt); color: var(--text); }
.btn--soft:hover { background: var(--text); color: #fff; }

.compare-card .compare tbody th {
  font-weight: 700; font-size: .875rem; color: var(--text);
  padding-block: 1.35rem;
}
.compare-card .compare tbody td {
  color: var(--text-soft); font-size: .9375rem; padding-block: 1.35rem;
}
.compare-card .compare tbody td strong { color: var(--text); }

/* ==========================================================================
   FAQ — two-column card, as on the reference
   ========================================================================== */
.faq-section { padding-top: 0; }
.faq-card {
  background: var(--surface);
  border-radius: 18px;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 899px) { .faq-card { grid-template-columns: minmax(0, 1fr); } }

.faq-card__intro h2 { margin-bottom: 1rem; }
.faq-card__intro p { color: var(--text-soft); font-size: .9375rem; }
.faq-card__intro a { text-decoration: underline; }
.faq-card__meta { color: var(--text-faint); font-size: .875rem; margin-top: 1.5rem; }

.faq--panel {
  background: var(--bg);
  border-radius: 14px;
  padding: .5rem clamp(1rem, 2.5vw, 1.75rem);
  max-width: none;
}
.faq--panel .faq__item:last-child { border-bottom: 0; }
.faq--panel .faq__q { font-size: .9375rem; }

/* ==========================================================================
   Hero slideshow
   ========================================================================== */
/* base .hero centres its child; the slide stack must fill the full height */
.hero--slideshow { display: grid; align-items: stretch; position: relative; }
/* All slides share one grid cell, so they stack without leaving the flow —
   absolute positioning collapsed the hero to the copy's height and left a
   dark band under the image. */
.hero__slides { display: grid; align-items: stretch; align-content: stretch; }
.hero__slide {
  grid-area: 1 / 1;
  display: grid; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease-out-quint), visibility .9s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* the slide image gets a slow push-in while it is the active one */
.hero__slide .hero__media img { transform: scale(1.02); transition: transform 7s linear; }
.hero__slide.is-active .hero__media img { transform: scale(1.1); }

.hero__sub {
  max-width: 46ch; margin: 0 0 2rem;
  color: rgba(255,255,255,.88); font-size: 1.0625rem;
}

/* active slide animates its copy in */
.hero__slide.is-active .hero__eyebrow,
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__sub,
.hero__slide.is-active .hero__actions { animation: buytac-rise .9s var(--ease-out-quint) both; }
.hero__slide.is-active .hero__eyebrow { animation-delay: .10s; }
.hero__slide.is-active .hero__title   { animation-delay: .18s; }
.hero__slide.is-active .hero__sub     { animation-delay: .26s; }
.hero__slide.is-active .hero__actions { animation-delay: .34s; }

/* ---------- arrows ---------- */
.hero__arrow {
  position: absolute; top: 50%; z-index: 5;
  width: 52px; height: 52px; transform: translateY(-50%);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(0,0,0,.22); color: #fff; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
  opacity: 0;
}
.hero--slideshow:hover .hero__arrow,
.hero__arrow:focus-visible { opacity: 1; }
.hero__arrow:hover { background: rgba(255,255,255,.92); color: var(--text); border-color: #fff; }
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow--prev { left: clamp(.75rem, 2.5vw, 2rem); }
.hero__arrow--next { right: clamp(.75rem, 2.5vw, 2rem); }
@media (max-width: 767px) { .hero__arrow { display: none; } }

/* ---------- dots ---------- */
.hero__dots {
  position: absolute; left: 50%; bottom: 5.5rem; z-index: 6;
  transform: translateX(-50%);
  display: flex; gap: .55rem;
}
.hero__dot {
  width: 34px; height: 4px; padding: 10px 0; border: 0; background: none; cursor: pointer;
  display: block;
}
.hero__dot span {
  display: block; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.42); transition: background-color .3s var(--ease);
  position: relative; overflow: hidden;
}
.hero__dot.is-active span { background: rgba(255,255,255,.9); }
.hero__dot.is-active span::after {
  content: ''; position: absolute; inset: 0;
  background: #fff; transform-origin: left;
  animation: buytac-dot var(--slide-duration, 6s) linear forwards;
}
@keyframes buytac-dot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero--slideshow.is-paused .hero__dot.is-active span::after { animation-play-state: paused; }

@media (max-width: 767px) { .hero__dots { bottom: 1.5rem; } }

/* points sit above the dots */
.hero--slideshow .hero__points {
  position: absolute; left: 0; right: 0; bottom: 2.25rem; z-index: 5;
  justify-content: center; margin: 0; padding-inline: var(--gutter);
  animation: none;
}
@media (max-width: 767px) { .hero--slideshow .hero__points { display: none; } }
/* the proof points already anchor the bottom edge; the cue only collided */
.hero--slideshow .hero__cue { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide .hero__media img { transition: none !important; }
  .hero__slide.is-active .hero__media img { transform: none !important; }
  .hero__slide.is-active :is(.hero__eyebrow, .hero__title, .hero__sub, .hero__actions) { animation: none !important; }
  .hero__dot.is-active span::after { animation: none !important; transform: scaleX(1); }
}