/* Figma 1796:2698 welcome artwork; 1737:2734 / 1737:2727 feature cards. */
.pet-landing-page {
  background: #f4f4e8;
  color: #255525;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.pet-landing {
  position: relative;
  isolation: isolate;
  --page-padding: 24px;
  --page-top: max(34px, env(safe-area-inset-top));
  --page-bottom: max(28px, env(safe-area-inset-bottom));
  --button-height: 62px;
  width: min(480px, 100%);
  height: 100vh;
  height: 100svh;
  margin: 0 auto;

  background: linear-gradient(155deg, #fff9ee 0%, #fff3d7 53%, #f0f3dc 100%);
}
.pet-hero { position: relative; z-index: 1; }
.pet-brand { display: block; width: 172px; }
.pet-brand img { display: block; width: 100%; height: auto; }
.pet-copy { margin-top: 42px; }
.pet-copy h1 { margin: 0; font-size: 36px; font-weight: 750; line-height: 1.2; letter-spacing: -1px; }
.pet-copy h1 span { display: block; margin-top: 4px; font-size: 43px; letter-spacing: -1.2px; }
.pet-tagline { margin: 18px 0 12px; color: #b98135; font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: .4px; }
.pet-description { max-width: 282px; margin: 0; color: #797b6c; font-size: 14px; line-height: 1.75; }
.pet-art {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 96px;
  left: 0;
  height: 590px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 94%, transparent);
}
.pet-hero-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
.pet-download-area { position: absolute; z-index: 2; right: var(--page-padding); bottom: var(--page-bottom); left: var(--page-padding); }
.pet-download-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pet-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--button-height);
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: white;
  background: #205426;
  box-shadow: 0 8px 22px #54744215;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.25;
  text-align: center;
}
.pet-download-button img { flex: none; width: 27px; height: 29px; }
.pet-download-button span { white-space: nowrap; }
.pet-ios { color: #245327; background: #fffefa; border-color: #dce3d3; box-shadow: none; }
.pet-download-button:not(.is-unavailable):hover { filter: brightness(1.06); }
.pet-download-button:not(.is-unavailable):active { transform: translateY(1px); }
.pet-download-button.is-unavailable { opacity: .5; font-size: 14px; }
.pet-install-help:not([hidden]) { position: absolute; right: 0; bottom: calc(100% + 12px); left: 0; margin: 0; padding: 12px 14px; border: 1px solid #dce3d3; border-radius: 12px; color: #4c6146; background: #fffefa; box-shadow: 0 5px 20px #40582d15; font-size: 13px; line-height: 1.7; }
.pet-landing-page :focus-visible { outline: 3px solid #ca923d; outline-offset: 4px; }
@media (max-width: 360px) {
  .pet-landing { --page-padding: 20px; --button-height: 56px; }
  .pet-brand { width: 150px; }
  .pet-copy { margin-top: 24px; }
  .pet-copy h1 { font-size: 29px; }
  .pet-copy h1 span { font-size: 36px; }
  .pet-tagline { margin-top: 14px; font-size: 17px; }
  .pet-description { font-size: 13px; }
  .pet-download-button { min-height: 56px; gap: 7px; font-size: 14px; }
  .pet-art { bottom: 84px; height: 490px; }
}
@media (max-height: 740px) {
  .pet-landing { --page-top: max(24px, env(safe-area-inset-top)); --page-bottom: max(24px, env(safe-area-inset-bottom)); --button-height: 56px; }
  .pet-copy { margin-top: 24px; }
  .pet-copy h1 { font-size: 30px; }
  .pet-copy h1 span { font-size: 37px; }
  .pet-tagline { margin: 12px 0 8px; font-size: 17px; }
  .pet-description { font-size: 13px; }
  .pet-art { bottom: 87px; height: 500px; }
  .pet-download-button { min-height: 56px; }
}
@media (max-height: 610px) {
  .pet-landing { --page-top: max(22px, env(safe-area-inset-top)); --page-bottom: max(20px, env(safe-area-inset-bottom)); --button-height: 54px; }
  .pet-brand { width: 142px; }
  .pet-copy { margin-top: 20px; }
  .pet-copy h1 { font-size: 26px; }
  .pet-copy h1 span { font-size: 33px; }
  .pet-tagline { margin: 10px 0 6px; font-size: 16px; }
  .pet-description { max-width: 250px; font-size: 12px; }
  .pet-art { bottom: 76px; height: 440px; }
  .pet-download-button { min-height: 54px; border-radius: 16px; font-size: 14px; }
}

.pet-carousel {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.pet-carousel::-webkit-scrollbar { display: none; }
.pet-carousel.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.pet-slide {
  position: relative;
  isolation: isolate;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  padding: var(--page-top) var(--page-padding) calc(var(--page-bottom) + var(--button-height) + 46px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pet-slide-feature { padding: 0; }
.pet-slide-mall { background: linear-gradient(160deg, #fff7e7, #f8f2d8); }
.pet-slide-chat { background: linear-gradient(160deg, #fcfde9, #edf3d7); }
.pet-feature-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; user-select: none; }
.pet-carousel-dots:not([hidden]) {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--page-bottom) + var(--button-height) + 10px);
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}
.pet-carousel-dot { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pet-carousel-dot::after { content: ''; width: 7px; height: 7px; border-radius: 10px; background: #25552540; transition: width 180ms ease, background 180ms ease; }
.pet-carousel-dot[aria-current]::after { width: 20px; background: #255525; }
@media (prefers-reduced-motion: reduce) { .pet-carousel-dot::after { transition: none; } }
@media (max-width: 360px) {
  .pet-download-button { font-size: 13px; }
  .pet-download-button img { width: 24px; height: 26px; }
}
@media (max-height: 480px) {
  .pet-landing { --page-top: 14px; --page-bottom: max(12px, env(safe-area-inset-bottom)); --button-height: 48px; }
  .pet-copy { margin-top: 12px; }
  .pet-copy h1 { font-size: 22px; }
  .pet-copy h1 span { font-size: 26px; }
  .pet-tagline { margin-block: 8px 4px; font-size: 14px; }
  .pet-description { font-size: 11px; }
  .pet-download-button { min-height: var(--button-height); }
}