.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 48px 24px;
  overflow-x: clip;
}

.landing__row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Row 1 — hero */
.landing__hero {
  text-align: center;
  gap: 16px;
}

.landing__title {
  color: var(--md-sys-color-on-background);
}

.landing__tagline {
  max-width: 40ch;
  color: var(--md-sys-color-on-background);
  opacity: 0.39;
}

/* Row 2 — slideshow (edge-to-edge stage, overflow visible for peeks) */
.landing__slideshow {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: visible;
}

.slideshow {
  --slideshow-width: 640px;
  --slideshow-height: 320px;
  --slide-width: 544px;
  --slide-gap: 12px;

  position: relative;
  width: var(--slideshow-width);
  height: var(--slideshow-height);
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
}

.slideshow__track {
  display: flex;
  align-items: stretch;
  gap: var(--slide-gap);
  width: max-content;
  height: 100%;
  will-change: transform;
  transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__track {
    transition: none;
  }
}

.slideshow__slide {
  position: relative;
  flex: 0 0 var(--slide-width);
  width: var(--slide-width);
  height: 100%;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-high);
  opacity: 0.72;
  transition: opacity 0.5s ease;
}

.slideshow__slide--centered {
  opacity: 1;
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__slide img[src=""],
.slideshow__slide img:not([src]) {
  display: none;
}

.slideshow__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    var(--md-sys-color-surface-container) 0%,
    var(--md-sys-color-surface-container-highest) 100%
  );
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--type-caption-size);
  font-weight: 400;
  letter-spacing: var(--type-caption-letter-spacing);
  line-height: var(--type-caption-line-height);
}

.slideshow__placeholder--hidden {
  display: none;
}

@media (max-width: 767px) {
  .slideshow {
    --slideshow-width: 320px;
    --slideshow-height: 180px;
    --slide-width: 272px;
  }
}

/* View Store — offline state (anchor cannot use :disabled) */
#view-store-btn[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
  filter: none;
  box-shadow: var(--md-sys-elevation-1);
  opacity: 0.38;
}

/* Row 3 — actions */
.landing__actions {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: none;
}

@media (max-width: 767px) {
  .landing {
    justify-content: flex-start;
  }

  .landing__actions {
    margin-top: auto;
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .landing {
    gap: 48px;
    padding: 72px 16px;
  }

  .landing__actions {
    gap: 16px;
  }
}