html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

@media (max-width: 768px) {
  body {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  nav.fixed,
  body > nav {
    padding: 12px 20px !important;
  }

  nav .max-w-7xl,
  nav .max-w-6xl,
  nav .max-w-5xl {
    width: 100%;
    gap: 12px;
  }

  nav a.flex.items-center {
    min-width: 0;
    min-height: 44px !important;
  }

  nav a.flex.items-center .flex-col {
    min-width: 0;
  }

  nav a.flex.items-center span {
    max-width: 48vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  nav .hidden.lg\:flex {
    display: none !important;
  }

  nav a[href*="#contact-section"],
  nav a[href*="#booking-section"],
  nav a[href*="#diagnostic-section"],
  nav button,
  .nav a,
  .button,
  a[class*="px-"],
  button[class*="px-"] {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  section.min-h-screen {
    min-height: auto !important;
    padding-top: 116px !important;
  }

  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl,
  .max-w-lg {
    max-width: 100% !important;
  }

  .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .px-6,
  .md\:px-12 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .p-8,
  .md\:p-12 {
    padding: 24px !important;
  }

  .p-6 {
    padding: 20px !important;
  }

  .gap-16,
  .gap-12,
  .gap-8 {
    gap: 28px !important;
  }

  .space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 24px !important;
  }

  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 18px !important;
  }

  h1,
  .page-hero h1 {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.14em !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.12em !important;
  }

  h3 {
    font-size: clamp(19px, 5.3vw, 26px) !important;
    line-height: 1.42 !important;
  }

  p,
  li,
  blockquote,
  input,
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  label,
  small,
  [class*="text-[9px]"],
  [class*="text-[10px]"],
  [class*="text-[11px]"],
  [class*="text-xs"] {
    line-height: 1.55 !important;
  }

  section p,
  section li {
    max-width: 100%;
  }

  .grid {
    min-width: 0;
  }

  [class*="grid-cols-"],
  .md\:grid-cols-2,
  .lg\:grid-cols-12,
  .lg\:grid-cols-5,
  .lg\:grid-cols-4,
  .md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  .lg\:col-span-4,
  .lg\:col-span-5,
  .lg\:col-span-6,
  .lg\:col-span-7,
  .lg\:col-span-8,
  .lg\:col-span-12,
  .md\:col-span-3,
  .md\:col-span-4,
  .md\:col-span-5,
  .md\:col-span-7 {
    grid-column: auto !important;
  }

  .lg\:sticky {
    position: static !important;
  }

  .flex:not(nav .flex):not(.home-banner-dots):not(.home-banner-track) {
    min-width: 0;
  }

  .flex-col.sm\:flex-row,
  .sm\:flex-row {
    flex-direction: column !important;
  }

  .sm\:items-center {
    align-items: stretch !important;
  }

  .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]),
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 14px !important;
  }

  a[class*="bg-brand-green"],
  button[class*="bg-brand-green"],
  a[class*="border"],
  button[class*="border"] {
    min-height: 44px !important;
    white-space: normal !important;
    text-align: center;
  }

  section a.font-serif,
  footer a,
  #mobile-menu a,
  #mobile-menu button,
  .back-home {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button[aria-label^="试听"],
  button[aria-label^="Play"],
  button[aria-label^="播放"] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  input,
  select,
  textarea {
    min-height: 44px !important;
  }

  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
  }

  .min-w-\[260px\],
  .min-w-\[280px\],
  .min-w-\[290px\],
  .min-w-\[300px\],
  .min-w-\[340px\],
  .md\:min-w-\[340px\],
  .md\:min-w-\[440px\] {
    min-width: min(84vw, 340px) !important;
  }

  .w-72,
  .md\:w-72,
  .w-64 {
    width: min(100%, 300px) !important;
  }

  .h-\[450px\],
  .md\:h-\[480px\],
  .h-\[420px\],
  .w-64.h-80,
  .w-64.h-80.bg-brand-sand {
    height: auto !important;
    min-height: 360px !important;
  }

  .home-banner {
    height: clamp(260px, 72vw, 340px) !important;
    margin-top: 72px;
    background: #1C3A35;
  }

  .home-banner-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #1C3A35;
  }

  .home-banner-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .home-banner-prev {
    left: 12px !important;
  }

  .home-banner-next {
    right: 12px !important;
  }

  .home-banner-dots {
    bottom: 14px !important;
  }

  .home-banner-dot {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    background: transparent !important;
    border-radius: 9999px !important;
    position: relative;
  }

  .home-banner-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(253, 251, 247, 0.62);
    transform: translate(-50%, -50%);
    transition: width 0.28s ease, background 0.28s ease;
  }

  .home-banner-dot.is-active::after {
    width: 28px;
    background: #FDFBF7;
  }

  #mobile-menu {
    overflow-y: auto;
  }

  footer {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
  }

  .nav .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
  }

  .nav .nav-links a {
    width: 100%;
    border: 1px solid rgba(47, 91, 81, 0.14);
    padding: 10px 12px;
    border-radius: 2px;
  }

  .page-hero,
  .section,
  .page-section,
  .assistant-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 430px) {
  nav.fixed,
  body > nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .px-6,
  .md\:px-12,
  .page-hero,
  .section,
  .page-section,
  .assistant-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  h1,
  .page-hero h1 {
    font-size: clamp(32px, 9.6vw, 40px) !important;
    letter-spacing: 0.12em !important;
  }

  h2 {
    font-size: clamp(23px, 7vw, 30px) !important;
  }

  .home-banner {
    height: clamp(248px, 70vw, 302px) !important;
  }

  .home-banner-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 390px) {
  h1,
  .page-hero h1 {
    font-size: 32px !important;
    letter-spacing: 0.1em !important;
  }

  .home-banner {
    height: 270px !important;
  }

  p,
  li,
  blockquote,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}