/* Shared responsive layer: keep the approved visual language at every viewport. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.header { padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
.section > *, .hero-copy, .member-main > *, .story-copy { min-width: 0; }
.hero { min-height: max(680px, 100svh); }
.hero-copy { margin-left: max(0px, calc((100vw - var(--content) - var(--pad) * 2) / 2)); }
.hero-stats > span { white-space: normal; }
.motion-toggle, .shendeng-motion-toggle, .story-video-toggle, .filter, .nav-cta, .dialog-close { min-height: 44px; }
.text-link, .shendeng-download { max-width: 100%; white-space: normal; }
.text-link > span, .hero-action-link > span { flex-shrink: 0; }
.mobile-menu-toggle, .header nav .mobile-app-link { display: none; }
.news-title { min-width: 0; overflow-wrap: anywhere; }
.plan-table-wrap { max-width: 100%; }
dialog { max-height: 85vh; max-height: 85dvh; }
.story--video .story-visual { min-width: 0; }

@media (min-width: 1921px) {
  :root { --content: 1600px; }
  .header { padding-inline: max(var(--pad), calc((100% - var(--content)) / 2)); }
  .hero-copy, html[lang="en"] .hero-copy { width: min(980px, 60%); }
  .hero-copy .hero-description { font-size: 18px; }
  .hero-copy .hero-stats { font-size: 17px; }
  html[lang="en"] .hero-copy .hero-stats { font-size: 15px; max-width: 760px; }
  .shendeng--video .shendeng-hero { min-height: 520px; }
}

/* A single menu replaces crowded navigation on tablets and small laptop windows. */
@media (max-width: 1100px) {
  .header, html[lang="en"] .header, .membership-page .header {
    height: 80px; flex-wrap: nowrap; gap: 18px; padding-block: 0;
  }
  .header .language-switch, html[lang="en"] .header .language-switch { margin-left: auto; }
  .header .nav-cta { display: none; }
  .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid #ffffff40; background: #090909a8; }
  .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 20px; height: 1px; background: #f5f5f2; position: relative; }
  .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
  .menu-lines::before { top: -6px; } .menu-lines::after { top: 6px; }
  .is-menu-open .menu-lines { background: transparent; }
  .is-menu-open .menu-lines::before { top: 0; transform: rotate(45deg); }
  .is-menu-open .menu-lines::after { top: 0; transform: rotate(-45deg); }
  .header nav, html[lang="en"] .header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: 12px var(--pad) 24px;
    border-bottom: 1px solid #333; background: #0c0d0ff7;
    max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto;
  }
  .header.is-menu-open nav, html[lang="en"] .header.is-menu-open nav { display: flex; }
  .header nav a, html[lang="en"] .header nav a { font-size: 16px; min-height: 48px; padding: 14px 0; border-bottom: 1px solid #ffffff15; white-space: normal; }
  .header nav .mobile-app-link { display: flex; justify-content: space-between; color: var(--accent); border: 0; }
  .hero-copy, html[lang="en"] .hero-copy { margin-left: 0; padding-top: 0; width: 85%; }
  .download-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .shendeng-footer { flex-wrap: wrap; }
  .shendeng--video .shendeng-copy { width: 60%; }
}

@media (max-width: 767px) {
  :root { --pad: clamp(20px, 5.5vw, 32px); }
  .header, html[lang="en"] .header { gap: 14px; }
  .hero { min-height: max(720px, 100svh); padding-top: 144px; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .hero-copy, html[lang="en"] .hero-copy { width: 100%; margin: 0; }
  .hero-copy h1 { font-size: clamp(42px, 10vw, 64px); }
  html[lang="en"] .hero-copy h1 { font-size: clamp(40px, 9vw, 64px); }
  .hero .motion-toggle { bottom: max(24px, env(safe-area-inset-bottom)); }
  .hero-copy .hero-stats { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .hero-stats > span + span::before { display: none; }
  .hero-copy .hero-facts { display: grid; gap: 4px; }
  .brands-grid, .brands-grid.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-card { min-width: 0; }
  .brand-card h3 { overflow-wrap: anywhere; }
  .benefit-title { white-space: normal; text-align: center; }
  .shendeng--video .shendeng-copy { width: 100%; padding-bottom: 180px; }
  .shendeng--video .shendeng-hero { min-height: 0; }
  .shendeng--video .shendeng-copy h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .shendeng--video .shendeng-features h3 { min-height: 0; }
  .shendeng--video .shendeng-intro { font-size: 15px; }
  .shendeng--video .shendeng-footer p { font-size: 13px; }
  .shendeng--video .shendeng-download { white-space: normal; }
  .story { gap: 28px; }
  .story--video .story-visual { aspect-ratio: 6 / 5; }
  .story-copy h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .download-benefit-grid { grid-template-columns: 1fr; gap: 0; }
  .download-copy h1 > span { white-space: normal; }
  .dialog-inner { padding-top: 56px; }
  .dialog-inner h2 { overflow-wrap: anywhere; }
  .brand-photo-dialog .brand-gallery-heading h2 { font-size: clamp(24px, 6vw, 32px); }
  .footer { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .brands-grid, .brands-grid.is-filtered { grid-template-columns: minmax(0, 1fr); }
  .brand-card { min-height: 210px; padding: 28px 24px; }
  .brand-card p { max-width: none; }
  .shendeng-download { font-size: 12px; }
}

@media (max-width: 360px) {
  .header, html[lang="en"] .header { gap: 10px; }
  .header .language-switch { gap: 5px; }
  .hero-actions { column-gap: 20px; }
  .hero-action-link { font-size: 12px; gap: 8px; }
  .hero-copy .hero-description { font-size: 14px; }
  html[lang="en"] .hero-copy .hero-description { font-size: 14px; }
  .member-talismans { grid-template-columns: 1fr; }
}

/* Preserve equal rows and top-aligned copy on Safari versions without subgrid. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    html[lang="en"] .download-benefit-grid > li { display: block; grid-row: auto; }
    html[lang="en"] .download-benefit-grid > li > div { display: block; }
    html[lang="en"] .download-benefit-grid h3 { min-height: 4.5em; }
  }
  @media (min-width: 481px) {
    html[lang="en"] .download-brand { grid-row: auto; display: flex; justify-content: flex-start; }
    html[lang="en"] .download-brand > div { min-height: 3.3em; }
  }
}