/* Mobile refinements layered over the generated Tailwind bundle. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
  /* Keep the floating header inside narrow screens and improve tap targets. */
  nav,
  header {
    max-width: calc(100vw - 24px);
  }

  button,
  a {
    touch-action: manipulation;
  }

  .fixed.top-6 {
    top: 12px;
    padding-inline: 12px;
  }

  .fixed.inset-x-4.top-\[88px\] {
    inset-inline: 12px;
    top: 72px;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Generated desktop spacing is too loose on phones. */
  .py-24 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .py-20 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .pt-20 {
    padding-top: 96px;
  }

  .pb-24 {
    padding-bottom: 56px;
  }

  .mb-16,
  .mb-14 {
    margin-bottom: 36px;
  }

  .gap-12 {
    gap: 32px;
  }

  .p-8 {
    padding: 24px;
  }

  .p-7 {
    padding: 22px;
  }

  /* Scale prominent typography without touching ordinary body copy. */
  .text-5xl,
  .text-6xl,
  .text-7xl {
    font-size: clamp(2.25rem, 10vw, 3rem);
    line-height: 1.12;
  }

  .text-4xl {
    font-size: 2rem;
    line-height: 1.2;
  }

  .text-3xl {
    font-size: 1.75rem;
    line-height: 1.25;
  }

  .text-xl,
  .text-2xl {
    line-height: 1.55;
  }

  /* Full-width primary actions are easier to use one-handed. */
  a[class*="px-8"][class*="py-4"],
  button[class*="px-8"][class*="py-4"] {
    width: 100%;
    min-height: 52px;
    padding-inline: 20px;
  }

  /* Prevent decorative desktop/floating content from covering mobile copy. */
  .pointer-events-none.absolute.inset-y-0.left-0,
  .pointer-events-none.absolute.inset-y-0.right-0 {
    width: 32px;
  }

  .fixed.z-50.pointer-events-none:not(.top-6) {
    display: none;
  }

  /* Cards and long Chinese/URL text must stay within the viewport. */
  [class*="rounded-2xl"],
  [class*="rounded-3xl"],
  p,
  h1,
  h2,
  h3,
  a {
    overflow-wrap: anywhere;
  }

  .overflow-hidden.w-full {
    max-width: 100vw;
  }

  footer .grid {
    gap: 32px;
  }
}

@media (max-width: 374px) {
  .px-4 {
    padding-inline: 14px;
  }

  .text-5xl,
  .text-6xl,
  .text-7xl {
    font-size: 2rem;
  }

  .p-8,
  .p-7 {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}