/* ════════════════════════════════════════════════════════════════════
   Mio&Gem Home v2 · Pink Mauve Visual System
   ════════════════════════════════════════════════════════════════════ */
.mg-home {
  --mg-bg:           #FBF7FA;
  --mg-bg-soft:      #F8EBF2;
  --mg-bg-soft-2:    #F4E0EC;
  --mg-bg-card:      #FFFFFF;
  --mg-bg-tint:      #FCF5F8;
  --mg-text:         #2A1F26;
  --mg-text-sub:     #6B5E66;
  --mg-text-dim:     #8A7B85;
  --mg-primary:      #BC93AB;
  --mg-primary-d:    #9C7390;
  --mg-primary-soft: rgba(188,147,171,0.10);
  --mg-border:       #EFDFE8;
  --mg-border-mid:   #D8BECC;
  --mg-serif-en:     "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --mg-serif-cn:     "Noto Serif SC", "Songti SC", "STSong", serif;
  --mg-sans:         "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-family:       var(--mg-sans);
  color:             var(--mg-text);
  background:        var(--mg-bg);
  line-height:       1.7;
  -webkit-font-smoothing: antialiased;
}
.mg-home *,
.mg-home *::before,
.mg-home *::after { box-sizing: border-box; }

/* Reveal animation */
.mg-reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease; }
.mg-reveal.visible { opacity:1; transform:translateY(0); }
.mg-reveal-d1 { transition-delay:0.08s; }
.mg-reveal-d2 { transition-delay:0.16s; }
.mg-reveal-d3 { transition-delay:0.24s; }
.mg-reveal-d4 { transition-delay:0.32s; }

/* ── §1 Promo Bar 已移至 snippets/mg-promo-bar.liquid 全站化 ─────────────── */

/* ── §2 Hero 区(图片当背景 + 渐变蒙板)──────────────── */
.mg-hero {
  position: relative;
  padding: 80px 24px 96px;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(188,147,171,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #EDDCE6 0%, #E0C8D8 45%, #C8A5BC 100%);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.mg-hero.has-image {
  background-image: var(--mg-hero-image);
  background-size: cover;
  background-position: center right;
}
.mg-hero-bg-img { display: none; }  /* desktop 用 background-image, mobile 才用 <img> */
/* 左→右渐变蒙板:左侧高不透明确保文字可读,右侧透明露图片焦点 */
.mg-hero-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(251,247,250,0.96) 0%,
    rgba(251,247,250,0.85) 28%,
    rgba(251,247,250,0.55) 48%,
    rgba(251,247,250,0.20) 65%,
    rgba(251,247,250,0) 90%
  );
  z-index: 1;
}
.mg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 40px;
  align-items: center;
}
/* 图片占位区(无真图时显示装饰水晶 SVG 在右侧)*/
.mg-hero-deco {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  max-width: 560px;
  height: 80%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-hero-deco svg { width: 100%; height: auto; max-height: 100%; }
.mg-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--mg-primary);
  margin-bottom: 22px;
  font-family: var(--mg-serif-cn);
}
.mg-hero-eyebrow::before,
.mg-hero-eyebrow::after {
  content: '✦';
  font-size: 11px;
  color: var(--mg-primary);
  opacity: 0.6;
}
.mg-hero-title {
  font-family: var(--mg-serif-en);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: var(--mg-text);
}
.mg-hero-title .accent {
  color: var(--mg-primary);
  font-style: italic;
  font-weight: 400;
  display: block;
}
.mg-hero-title-cn {
  font-family: var(--mg-serif-cn);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  letter-spacing: 0;
}
.mg-hero-title-cn .accent {
  font-style: normal;
  font-weight: 600;
}
.mg-hero-desc {
  font-size: 15px;
  color: var(--mg-text-sub);
  line-height: 1.85;
  max-width: 460px;
  margin: 0 0 48px;
}
.mg-hero-text {
  margin-bottom: 12px;
}

/* Hero 表单卡 */
.mg-hero-form {
  background: var(--mg-bg-card);
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 8px 32px rgba(188,147,171,0.10);
  max-width: 460px;
}
.mg-hero-form-title {
  text-align: center;
  font-family: var(--mg-serif-cn);
  font-size: 19px;
  font-weight: 600;
  color: var(--mg-text);
  margin: 0 0 8px;
}
.mg-hero-form-sub {
  text-align: center;
  font-size: 13px;
  color: var(--mg-text-sub);
  line-height: 1.7;
  margin: 0 0 22px;
}
.mg-hero-form-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.mg-hero-form-labels label {
  font-family: var(--mg-sans);
  font-size: 11px;
  color: var(--mg-text-sub);
  letter-spacing: 0.04em;
}
.mg-hero-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

/* ── Intent (意图) 选择器 ─────────────────────────────── */
.mg-hero-form-intent-label {
  font-family: var(--mg-sans);
  font-size: 12px;
  color: var(--mg-text-sub);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.mg-hero-form-intents {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  align-items: stretch;
}
.mg-hero-intent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;            /* icon 默认居中 (inactive 正方形) */
  gap: 10px;
  /* default (inactive) — 正方形 48×48, icon centered */
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  background: var(--mg-bg-tint);
  border: 1.5px solid var(--mg-border);
  border-radius: 12px;
  font-family: var(--mg-sans);
  color: var(--mg-text-sub);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: flex 0.25s ease, width 0.25s ease, height 0.25s ease,
              background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.18s ease,
              padding 0.25s ease, justify-content 0.2s ease;
}
.mg-hero-intent svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--mg-text-dim);
  transition: color 0.2s ease;
}
.mg-hero-intent .mg-hero-intent-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* inactive: 脱出 flex layout (position absolute) — svg 成为唯一 flex item, 真正居中 */
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  width: 0;
  margin: 0;
  padding: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mg-hero-intent .mg-hero-intent-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--mg-text);
  white-space: nowrap;
}
.mg-hero-intent .mg-hero-intent-sub {
  font-size: 11px;
  line-height: 1.3;
  color: var(--mg-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-hero-intent:hover { border-color: var(--mg-primary); }
.mg-hero-intent:hover svg { color: var(--mg-primary); }
.mg-hero-intent.is-active {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 48px;
  padding: 10px 14px;
  justify-content: flex-start;
  background: rgba(188,147,171,0.10);
  border-color: var(--mg-primary);
}
.mg-hero-intent.is-active svg { color: var(--mg-primary); }
.mg-hero-intent.is-active .mg-hero-intent-text {
  position: static;        /* 回到 flex layout */
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  width: auto;
  flex: 0 1 auto;          /* allow shrink + auto width */
  pointer-events: auto;
}
.mg-hero-input-wrap {
  position: relative;
}
.mg-hero-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mg-text-dim);
  pointer-events: none;
}
.mg-hero-input {
  width: 100%;
  padding: 12px 12px 12px 38px;
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  font-family: var(--mg-sans);
  font-size: 14px;
  color: var(--mg-text);
  background: var(--mg-bg-tint);
  transition: border-color 0.2s, background 0.2s;
}
.mg-hero-input:focus {
  outline: none;
  border-color: var(--mg-primary);
  background: #fff;
}
.mg-hero-input::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}
.mg-hero-cta {
  width: 100%;
  padding: 14px 24px;
  background: var(--mg-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--mg-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mg-hero-cta:hover {
  background: var(--mg-primary-d);
  transform: translateY(-1px);
}
.mg-hero-form-note {
  font-size: 11px;
  color: var(--mg-text-dim);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.6;
}

/* Hero 右侧装饰小光点(无真图时增加层次感)*/
.mg-hero::before,
.mg-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  z-index: 1;
}
.mg-hero::before {
  width: 6px; height: 6px;
  top: 22%; right: 28%;
  box-shadow:
    -40px 80px 0 -1px rgba(255,255,255,0.45),
    80px 60px 0 -2px rgba(255,255,255,0.35),
    140px 200px 0 -1px rgba(255,255,255,0.40);
}
.mg-hero::after {
  width: 4px; height: 4px;
  top: 55%; right: 12%;
  box-shadow:
    -120px -100px 0 -1px rgba(255,255,255,0.55),
    -60px 90px 0 -1px rgba(255,255,255,0.30);
}

@media (max-width: 900px) {
  .mg-hero {
    padding: 56px 20px 64px;
    min-height: 620px;
    background-position: center top;
  }
  .mg-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  /* 移动端蒙板更不透明,确保文字依然可读 */
  .mg-hero-mask {
    background: linear-gradient(180deg,
      rgba(251,247,250,0.92) 0%,
      rgba(251,247,250,0.88) 60%,
      rgba(251,247,250,0.78) 100%
    );
  }
  .mg-hero-deco { display: none; }
}
@media (max-width: 560px) {
  .mg-hero { padding: 40px 16px 56px; min-height: 540px; }
  .mg-hero-form { padding: 22px 20px 20px; }
  .mg-hero-form-row { grid-template-columns: 1fr; }
  .mg-hero-form-labels { grid-template-columns: 1fr; gap: 4px; }
}

/* ── §3 Trust Strip(5 项精致版)──────────────────── */
.mg-trust-strip {
  background: var(--mg-bg-card);
  border-bottom: 1px solid var(--mg-border);
  padding: 22px 24px;
}
.mg-trust-strip-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.mg-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mg-sans);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mg-text-sub);
  line-height: 1.45;
  letter-spacing: 0.015em;
}
.mg-trust-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--mg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mg-bg-soft);
  border-radius: 50%;
}
.mg-trust-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 1.4;
}
@media (max-width: 900px) {
  .mg-trust-strip-inner { gap: 16px; }  /* 3 项保持 3 列,gap 缩小 */
}

/* ── §3.5 Intentions: image-card carousel ──────── */
.mg-intentions {
  background: var(--mg-bg);
  padding: 60px 0 56px;
  overflow: hidden;
}
.mg-intentions-head {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}
.mg-intentions-title {
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  color: var(--mg-text);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.mg-intentions-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; }
.mg-intentions-title::before,
.mg-intentions-title::after {
  content: '✦';
  font-size: 11px;
  color: var(--mg-primary);
  margin: 0 12px;
  vertical-align: middle;
  opacity: 0.65;
}
.mg-intentions-sub {
  font-size: 13px;
  color: var(--mg-text-sub);
  margin: 0;
  line-height: 1.6;
}

/* image-card carousel wrap */
.mg-icc-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
.mg-icc-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 0 24px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mg-icc-track::-webkit-scrollbar { display: none; }
.mg-icc-card {
  position: relative;
  flex: 0 0 32%;
  scroll-snap-align: center;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #F2DCE6 0%, #E0BFD2 100%);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mg-icc-card.is-active {
  transform: scale(1.04);
  box-shadow: 0 18px 42px rgba(188,147,171,0.22);
}
.mg-icc-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mg-icc-card-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(42,31,38,0.62) 100%);
  color: #fff;
}
.mg-icc-card-title {
  font-family: var(--mg-serif-cn);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.mg-icc-card-sub {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.92;
}
.mg-icc-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--mg-bg-card);
  border: 1px solid var(--mg-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--mg-primary-d);
  z-index: 3;
  box-shadow: 0 4px 12px rgba(188,147,171,0.18);
  transition: background 0.2s, transform 0.15s, color 0.2s;
}
.mg-icc-ctrl:hover { background: var(--mg-primary); color: #fff; transform: translateY(-50%) scale(1.06); }
.mg-icc-ctrl-prev { left: 8px; }
.mg-icc-ctrl-next { right: 8px; }

/* icon-tab strip - click-to-jump to card */
.mg-icc-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 0;
}
.mg-icc-tab {
  width: 40px; height: 40px;
  border: 1.5px solid var(--mg-border);
  background: var(--mg-bg-card);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-text-dim);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.mg-icc-tab svg { width: 18px; height: 18px; stroke-width: 1.5; }
.mg-icc-tab:hover { border-color: var(--mg-primary); color: var(--mg-primary); }
.mg-icc-tab.is-active {
  background: var(--mg-primary);
  border-color: var(--mg-primary);
  color: #fff;
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .mg-icc-wrap { padding: 0 16px; }
  .mg-icc-card { flex: 0 0 75vw; }  /* 3/4 screen width on mobile */
  .mg-icc-ctrl { display: none; }
  .mg-icc-tabs { margin-top: 8px; }
}

/* ── §3.6 Five Elements tab carousel ──────────── */
.mg-wuxing {
  background: var(--mg-bg);                          /* solid (was gradient) */
  padding: 64px 24px 72px;
}
.mg-wuxing-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.mg-wuxing-title {
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  color: var(--mg-text);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.mg-wuxing-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; }
.mg-wuxing-title::before,
.mg-wuxing-title::after {
  content: '✦';
  font-size: 11px;
  color: var(--mg-primary);
  margin: 0 12px;
  vertical-align: middle;
  opacity: 0.65;
}
.mg-wuxing-sub {
  font-size: 13px;
  color: var(--mg-text-sub);
  margin: 0 0 28px;
  line-height: 1.6;
}

/* tab strip: 5 elements */
.mg-wuxing-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 22px;
  max-width: 720px;
}
.mg-wuxing-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 10px;
  background: var(--mg-bg-card);
  border: 1.5px solid var(--mg-border);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--mg-sans);
  color: var(--mg-text-sub);
  min-width: 80px;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.18s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.mg-wuxing-tab:hover {
  border-color: var(--mg-primary);
  transform: translateY(-2px);
}
.mg-wuxing-tab.is-active {
  background: rgba(188,147,171,0.10);
  border-color: var(--mg-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(188,147,171,0.18);
}
.mg-wuxing-tab-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mg-text-dim);
  transition: color 0.2s ease, transform 0.2s ease;
}
.mg-wuxing-tab-icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.mg-wuxing-tab.is-active .mg-wuxing-tab-icon { transform: scale(1.06); }
.mg-wuxing-tab--wood.is-active  .mg-wuxing-tab-icon { color: #6FAA76; }
.mg-wuxing-tab--fire.is-active  .mg-wuxing-tab-icon { color: #C97777; }
.mg-wuxing-tab--earth.is-active .mg-wuxing-tab-icon { color: #B9925E; }
.mg-wuxing-tab--metal.is-active .mg-wuxing-tab-icon { color: #A8A19D; }
.mg-wuxing-tab--water.is-active .mg-wuxing-tab-icon { color: #6B8FAA; }
.mg-wuxing-tab-name {
  font-family: var(--mg-serif-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--mg-text);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.mg-wuxing-tab.is-active .mg-wuxing-tab-name { color: var(--mg-text); }
.mg-wuxing-tab-name-en {
  font-family: var(--mg-serif-en);
  font-size: 10px;
  font-weight: 500;
  color: var(--mg-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* content panels - one per element */
.mg-wuxing-stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.mg-wuxing-panel {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #F2DCE6 0%, #E0BFD2 100%);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.mg-wuxing-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}
.mg-wuxing-panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mg-wuxing-panel-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 36px 36px 32px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(42,31,38,0.72) 100%);
  color: #fff;
}
.mg-wuxing-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mg-serif-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 8px;
}
.mg-wuxing-panel-eyebrow-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.mg-wuxing-panel--wood  .mg-wuxing-panel-eyebrow-dot { background: #6FAA76; }
.mg-wuxing-panel--fire  .mg-wuxing-panel-eyebrow-dot { background: #C97777; }
.mg-wuxing-panel--earth .mg-wuxing-panel-eyebrow-dot { background: #B9925E; }
.mg-wuxing-panel--metal .mg-wuxing-panel-eyebrow-dot { background: #A8A19D; }
.mg-wuxing-panel--water .mg-wuxing-panel-eyebrow-dot { background: #6B8FAA; }
.mg-wuxing-panel-title {
  font-family: var(--mg-serif-cn);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0 0 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.mg-wuxing-panel-blurb {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 18px;
  opacity: 0.94;
  max-width: 520px;
}
.mg-wuxing-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 10px 16px;
  background: rgba(255,255,255,0.92);
  color: var(--mg-text);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.mg-wuxing-panel-cta:hover { background: #fff; }

@media (max-width: 640px) {
  .mg-wuxing { padding: 48px 16px 56px; }
  .mg-wuxing-tabs { gap: 8px; }
  .mg-wuxing-tab { min-width: 60px; padding: 10px 10px 8px; gap: 4px; }
  .mg-wuxing-tab-icon { width: 22px; height: 22px; }
  .mg-wuxing-tab-name { font-size: 12px; }
  .mg-wuxing-tab-name-en { font-size: 9px; }
  .mg-wuxing-stage { aspect-ratio: 4 / 5; max-width: 520px; }
  .mg-wuxing-panel-overlay { padding: 20px 20px 22px; }
  .mg-wuxing-panel-title { font-size: 22px; }
  .mg-wuxing-panel-blurb { font-size: 13px; }
}
@media (max-width: 420px) {
  .mg-wuxing-tab { min-width: 52px; padding: 8px 8px 6px; }
  .mg-wuxing-tab-name { font-size: 11px; }
  .mg-wuxing-tab-name-en { font-size: 8.5px; }
}



/* ── §BRAND-LIFT  Section editorial step marker + group backgrounds + dividers ── */
/* mg-step-marker CSS removed - editorial No. labels deleted */

/* §BG-GROUP — alternate backgrounds bring rhythm between section blocks */
.mg-bg-group-a { background: var(--mg-bg) !important; }              /* default soft pink #FBF7FA */
.mg-bg-group-b { background: #E8DCE5 !important; }                    /* stronger mauve - clearer rhythm */
.mg-bg-group-c { background: #FFFFFF !important; }                    /* clean white reset */

/* §DIVIDER — hairline gold ribbon between sections (rendered via ::after on section) */
/* mg-section-divider CSS removed */
@media (max-width: 749px) {
}


/* ── §7.5 BUFFER — brand strip between Reviews and Newsletter ── */
.mg-buffer {
  background: var(--mg-bg-card);
  padding: 88px 24px 96px;
  overflow: hidden;
}
/* 文字 only 模式 (buffer_image 为空时用) */
.mg-buffer-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.mg-buffer-eyebrow {
  display: inline-block;
  font-family: var(--mg-serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mg-primary);
  opacity: 0.78;
  margin: 0 0 16px;
}
.mg-buffer-headline {
  font-family: var(--mg-serif-en);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--mg-text);
  letter-spacing: 0.01em;
  margin: 0 auto;
  max-width: 680px;
}
/* §BUFFER-IMG  背景图模式 — 与 .mg-tabsec-stage 同款 16:9 大卡, 文字 bottom-center 叠加 */
.mg-buffer-stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #F2DCE6 0%, #E0BFD2 100%);
}
.mg-buffer-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--mg-img-pos-x, 50%) var(--mg-img-pos-y, 50%);
  transform: scale(var(--mg-img-scale, 1));
  transform-origin: var(--mg-img-pos-x, 50%) var(--mg-img-pos-y, 50%);
  display: block;
}
.mg-buffer-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center;         /* §BUFFER-TEXT-CENTER  文字垂直居中 */
  align-items: center;             /* 水平居中 */
  text-align: center;
  padding: 36px 36px 40px;
  gap: 16px;                       /* §BUFFER-EDITORIAL  rule / eyebrow / headline 之间的呼吸 */
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(42,31,38,0.62) 100%);
}
/* §BUFFER-RULE  细金线, 上下各一条, 两端淡出 */
.mg-buffer-rule {
  display: block;
  width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 35%, currentColor 65%, transparent);
  opacity: 0.55;
}
/* §EYEBROW-EDITORIAL  small caps 模拟: uppercase + 极宽字距 + 细字重 */
.mg-buffer-overlay .mg-buffer-eyebrow {
  font-family: var(--mg-serif-en);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  opacity: 1;
  margin: 0;
  padding-left: 0.36em;            /* 补偿 letter-spacing 让最后一个字母不撞右边 */
}
/* §HEADLINE-EDITORIAL  大号 italic + 细字重 + 微微展开字距, 让标题本身高级 */
.mg-buffer-overlay .mg-buffer-headline {
  font-family: var(--mg-serif-en);
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  margin: 0 auto;
  max-width: 720px;
}
@media (max-width: 900px) {
  /* §BUFFER-MOBILE-FULLWIDTH  mobile 端图全屏, 不留左右边距 */
  .mg-buffer { padding: 72px 0 80px; }
  .mg-buffer-stage { aspect-ratio: 4/5; max-width: none; }
  .mg-buffer-overlay { padding: 22px 22px 28px; }
  .mg-buffer-eyebrow { font-size: 11.5px; }
}

/* ── §TABSEC (shared) — folder-tag overlay on image, used by Improve / Popular / Five Elements / Reviews ── */
.mg-tabsec { background: var(--mg-bg); padding: 48px 0 40px; overflow: hidden; }
/* §REVIEWS-EXTRA-PADDING — Reviews 上方加大间距 */
.mg-tabsec.mg-reviews { padding-top: 112px; }
@media (max-width: 749px) {
  .mg-tabsec.mg-reviews { padding-top: 88px; }
}
.mg-tabsec-head { max-width: 1200px; margin: 0 auto 28px; padding: 0 24px; text-align: center; }
/* §EYEBROW-WRAP  外层 flex 容器: ──── ✦ + chip + ✦ ──── 三件套 */
.mg-tabsec-eyebrow,
.mg-howit-eyebrow {
  /* §EYEBROW-CENTER  display: flex (block) + justify-content: center
     不依赖父容器 text-align (mg-howit-inner 就没设, 之前会靠左) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 16px;
}
.mg-tabsec-eyebrow::before, .mg-tabsec-eyebrow::after,
.mg-howit-eyebrow::before, .mg-howit-eyebrow::after {
  content: '───────── ✦';
  flex: 0 0 auto;
  font-family: var(--mg-serif-en);
  font-size: 13px;
  font-weight: 400;
  color: var(--mg-primary);
  opacity: 0.55;
  letter-spacing: -0.05em;
}
.mg-tabsec-eyebrow::after, .mg-howit-eyebrow::after { content: '✦ ─────────'; }
/* §EYEBROW-CHIP  内层药丸: 浅 mauve 底 + 上 inset 高光 + 下 inset 凹陷 + 外发散 mauve glow + 字 white inset 浮雕 */
.mg-tabsec-eyebrow-chip,
.mg-howit-eyebrow-chip {
  display: inline-block;
  padding: 3px 11px;
  padding-left: calc(11px + 0.28em);              /* 补偿 letter-spacing */
  background: var(--mg-bg-soft);                  /* #F8EBF2 */
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(188, 147, 171, 0.2),
    0 4px 10px -6px rgba(188, 147, 171, 0.45),
    0 1px 2px rgba(42, 31, 38, 0.04);
  font-family: var(--mg-serif-en);
  font-style: italic;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mg-primary-d);                     /* #9C7390 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}
@media (max-width: 749px) {
  .mg-tabsec-eyebrow, .mg-howit-eyebrow { gap: 8px; margin-bottom: 12px; }
  .mg-tabsec-eyebrow::before, .mg-tabsec-eyebrow::after,
  .mg-howit-eyebrow::before, .mg-howit-eyebrow::after { font-size: 11px; }
  .mg-tabsec-eyebrow-chip, .mg-howit-eyebrow-chip {
    font-size: 8.5px;
    padding: 2px 9px;
    padding-left: calc(9px + 0.24em);
    letter-spacing: 0.24em;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 1px rgba(188, 147, 171, 0.2),
      0 3px 8px -5px rgba(188, 147, 171, 0.45),
      0 1px 2px rgba(42, 31, 38, 0.04);
  }
}
.mg-tabsec-title {
  /* §TITLE-LUXE  精致 editorial 风 — 装饰线已迁移到上方 .mg-tabsec-eyebrow */
  text-align: center;
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  font-style: normal;
  color: var(--mg-text);
  margin: 0 0 12px;
  letter-spacing: 0.025em;
  line-height: 1.2;
}
.mg-tabsec-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; letter-spacing: 0.04em; }
@media (max-width: 749px) {
  .mg-tabsec-title { font-size: clamp(20px, 5vw, 26px); }
}
.mg-tabsec-sub { font-size: 13px; color: var(--mg-text-sub); margin: 0; line-height: 1.6; }

.mg-tabsec-stage {
  position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9;
}
/* tabs ABOVE stage, max-width matches stage width (880px desktop), horizontal scroll on overflow */
.mg-tabsec-tabs {
  display: flex; gap: 4px;
  max-width: 880px; margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
  position: relative; z-index: 2;
}
.mg-tabsec-tabs::-webkit-scrollbar { display: none; }
.mg-tabsec-tab {
  display: inline-flex; align-items: center;
  gap: 0;                                       /* no icon — no gap needed */
  padding: 10px 18px;
  background: transparent;                       /* inactive: outline only */
  border: 1px solid var(--mg-border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  cursor: pointer; flex: 0 0 auto;
  font-family: var(--mg-sans);
  color: var(--mg-text-sub); font-size: 12.5px; font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, border-color 0.2s ease;
  white-space: nowrap;
  margin-bottom: 0;
}
.mg-tabsec-tab:hover {
  background: rgba(188,147,171,0.10);
  color: var(--mg-text);
  border-color: var(--mg-primary);
}
.mg-tabsec-tab.is-active {
  background: var(--mg-primary);               /* filled primary */
  color: #fff;
  font-weight: 600;
  border-color: var(--mg-primary);
  transform: translateY(-2px);
}
/* Hide icon span in tabs (Stella: no-icon style) */
.mg-tabsec-tab .mg-tabsec-tab-icon { display: none; }
.mg-tabsec-tab-icon {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mg-bg-soft); color: var(--mg-primary-d);
  font-family: var(--mg-serif-en); font-size: 11px; font-weight: 600;
  overflow: hidden; flex-shrink: 0;
}
.mg-tabsec-tab-icon img { width: 100%; height: 100%; object-fit: cover; }
.mg-tabsec-tab-name {
  font-family: var(--mg-serif-cn);
  line-height: 1.2; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
}

.mg-tabsec-panel {
  position: absolute; inset: 0; border-radius: 0; overflow: hidden;
  background: linear-gradient(135deg, #F2DCE6 0%, #E0BFD2 100%);
  opacity: 0; visibility: hidden; transform: scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  text-decoration: none; color: inherit; display: block;
}
.mg-tabsec-panel.is-active {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}
.mg-tabsec-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* §IMPROVE-IMG-CTRL  通过父 panel 的 CSS 变量调横/纵位置 + 放大 (Improve schema 暴露) */
  object-position: var(--mg-img-pos-x, 50%) var(--mg-img-pos-y, 50%);
  transform: scale(var(--mg-img-scale, 1));
  transform-origin: var(--mg-img-pos-x, 50%) var(--mg-img-pos-y, 50%);
}
.mg-tabsec-panel-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 36px 36px 32px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(42,31,38,0.72) 100%);
}
.mg-tabsec-panel-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mg-serif-en); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; margin: 0 0 8px;
}
.mg-tabsec-panel-eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mg-primary); }
.mg-tabsec-panel-title {
  font-family: var(--mg-serif-cn); font-size: clamp(22px, 3vw, 28px); font-weight: 600;
  margin: 0 0 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.mg-tabsec-panel-blurb { font-size: 14px; line-height: 1.7; margin: 0 0 18px; opacity: 0.94; max-width: 520px; }
.mg-tabsec-panel-cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 10px 16px; background: rgba(255,255,255,0.92); color: var(--mg-text);
  border-radius: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.mg-tabsec-panel-cta:hover { background: #fff; }

/* §TABSEC--carousel (Reviews) — horizontal scroll cards, no tabs */
.mg-tabsec--carousel { padding-bottom: 56px; }
.mg-tabsec--carousel .mg-tabsec-stage { aspect-ratio: auto; max-width: 1200px; padding: 0; margin: 0 auto; }
.mg-tabsec-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 24px 18px;
  -ms-overflow-style: none; scrollbar-width: none;
  max-width: 1200px; margin: 0 auto;
}
.mg-tabsec-track::-webkit-scrollbar { display: none; }
.mg-tabsec-card {
  flex: 0 0 32%;
  scroll-snap-align: center;
  background: var(--mg-bg-card);
  border: 1px solid var(--mg-border);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
}
.mg-tabsec-card-head { display: flex; align-items: center; gap: 12px; }
.mg-tabsec-card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mg-bg-soft); color: var(--mg-primary-d);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mg-serif-en); font-size: 18px; font-weight: 600;
  overflow: hidden; flex-shrink: 0;
}
.mg-tabsec-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mg-tabsec-card-name { font-family: var(--mg-sans); font-size: 14px; font-weight: 600; color: var(--mg-text); }
.mg-tabsec-card-stars { display: inline-flex; gap: 1px; color: var(--mg-primary); }
.mg-tabsec-card-stars svg { width: 12px; height: 12px; }
.mg-tabsec-card-quote {
  font-family: var(--mg-serif-cn); font-style: italic;
  font-size: 14px; line-height: 1.75; color: var(--mg-text); margin: 0;
}

@media (max-width: 900px) {
  .mg-tabsec-tabs { padding: 10px 10px 0; gap: 4px; }
  .mg-tabsec-tab { padding: 6px 10px; font-size: 11.5px; }
  .mg-tabsec-tab-name { max-width: 100px; }
  .mg-tabsec-stage { aspect-ratio: 4/5; max-width: 520px; margin: 0 16px; }
  .mg-tabsec-panel-overlay { padding: 22px 22px 24px; }
  .mg-tabsec-panel-title { font-size: 22px; }
  .mg-tabsec-panel-blurb { font-size: 13px; }
  .mg-tabsec--carousel .mg-tabsec-stage { aspect-ratio: auto; max-width: none; margin: 0; }
  .mg-tabsec--carousel .mg-tabsec-card { flex: 0 0 78vw; }
}

/* ── §4 How It Works (4 steps · horizontal flow + watermark numbers) ─── */
.mg-howit {
  background: var(--mg-bg);                          /* solid (was gradient) */
  padding: 48px 24px 56px;
}
.mg-howit-inner { max-width: 1200px; margin: 0 auto; }
.mg-howit-title {
  /* aligned with .mg-tabsec-title — 装饰线已迁移到上方 .mg-howit-eyebrow */
  text-align: center;
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  font-style: normal;
  color: var(--mg-text);
  margin: 0 0 40px;
  letter-spacing: 0.025em;
  line-height: 1.2;
}
.mg-howit-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; letter-spacing: 0.04em; }
.mg-howit-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.mg-howit-step {
  position: relative;
  text-align: left;
  padding: 26px 26px 26px 28px;
  background: rgba(255,255,255,0.55);
  border-radius: 28px 24px 26px 26px / 26px 26px 24px 28px;
  transition: transform 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(4px);
  text-decoration: none;
  color: inherit;
  /* grid: [icon] [content stack: title / desc / cta] */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
  overflow: hidden;
  min-height: 116px;
}
.mg-howit-step:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-4px);
}
/* Watermark 序号:背景大数字定位左上角,opacity 由 schema slider 控制 */
.mg-howit-step-watermark {
  position: absolute;
  top: -8px;
  left: 8px;
  transform: none;
  font-family: var(--mg-serif-en);
  font-size: 96px;
  line-height: 1;
  font-weight: 600;
  color: rgba(108, 86, 99, var(--mg-howit-num-opacity, 0.18));
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
}
.mg-howit-step > *:not(.mg-howit-step-watermark) {
  position: relative;
  z-index: 1;
}
.mg-howit-icon {
  width: 64px;
  height: 64px;
  margin: 0;
  color: var(--mg-primary);
  opacity: 0.78;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}
.mg-howit-icon svg { width: 100%; height: 100%; }
.mg-howit-step-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--mg-text);
  margin: 0;
  line-height: 1.35;
}
.mg-howit-step-desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 13px;
  color: var(--mg-text-sub);
  line-height: 1.55;
  margin: 0;
}
/* Step 1 CTA - only shows on the anchor-wrapped step */
.mg-howit-step-cta {
  grid-column: 2;
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mg-primary-d);
  letter-spacing: 0.02em;
  margin-top: 6px;
  border-bottom: 1px solid var(--mg-primary);
  padding-bottom: 2px;
  align-self: flex-start;
  justify-self: start;
}
.mg-howit-arrow {
  color: var(--mg-primary);
  opacity: 0.5;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-howit-arrow svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .mg-howit-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mg-howit-arrow { display: none; }
  .mg-howit-step-watermark { font-size: 84px; top: -6px; left: 6px; }
}
@media (max-width: 560px) {
  .mg-howit { padding: 56px 20px; }
  .mg-howit-grid { grid-template-columns: 1fr; }
  .mg-howit-step-watermark { font-size: 72px; top: -6px; left: 6px; }
}

/* ── §5 Crystals That Complement Your Energy - REMOVED in v3 ─── */

/* ── §6 Popular Crystals - carousel ──────────── */
.mg-popular {
  background: var(--mg-bg);
  padding: 72px 0;
}
.mg-popular-head {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.mg-popular-title {
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  color: var(--mg-text);
  margin: 0;
  letter-spacing: 0.01em;
}
.mg-popular-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; }
.mg-popular-title::before,
.mg-popular-title::after {
  content: '✦';
  font-size: 11px;
  color: var(--mg-primary);
  margin: 0 12px;
  vertical-align: middle;
  opacity: 0.65;
}
.mg-popular-link {
  font-size: 13px;
  color: var(--mg-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.mg-popular-link:hover { color: var(--mg-primary-d); }

.mg-pop-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
.mg-pop-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 0 18px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mg-pop-track::-webkit-scrollbar { display: none; }
.mg-pop-card {
  flex: 0 0 calc((100% - 64px) / 5);
  background: var(--mg-bg-card);
  border-radius: 16px;
  padding: 24px 18px 22px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mg-pop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(188,147,171,0.12);
}
.mg-pop-img {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #F2DCE6, #D8B5C8);
}
.mg-pop-img img { width: 100%; height: 100%; object-fit: cover; }
.mg-pop-name {
  font-family: var(--mg-serif-cn);
  font-size: 17px;
  font-weight: 600;
  color: var(--mg-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.mg-pop-name-en { font-family: var(--mg-serif-en); font-size: 17px; }
.mg-pop-keywords {
  font-size: 12px;
  color: var(--mg-text-sub);
  line-height: 1.6;
  margin: 0;
}
.mg-pop-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--mg-bg-card);
  border: 1px solid var(--mg-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--mg-primary-d);
  z-index: 3;
  box-shadow: 0 4px 12px rgba(188,147,171,0.18);
  transition: background 0.2s, transform 0.15s, color 0.2s;
}
.mg-pop-ctrl:hover { background: var(--mg-primary); color: #fff; transform: translateY(-50%) scale(1.06); }
.mg-pop-ctrl-prev { left: 8px; }
.mg-pop-ctrl-next { right: 8px; }
@media (max-width: 900px) {
  .mg-pop-card { flex: 0 0 38vw; }
}
@media (max-width: 560px) {
  .mg-popular { padding: 56px 0; }
  .mg-pop-wrap { padding: 0 16px; }
  .mg-pop-card { flex: 0 0 60vw; }
  .mg-pop-ctrl { display: none; }
}

/* ── §7 Reviews (replaces Trusted-by) ──────── */
.mg-reviews {
  background: var(--mg-bg);
  padding: 0 0 80px;
}
.mg-reviews-head {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}
.mg-reviews-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mg-primary);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mg-reviews-title {
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  color: var(--mg-text);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.mg-reviews-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; }
.mg-reviews-title::before,
.mg-reviews-title::after {
  content: '✦';
  font-size: 11px;
  color: var(--mg-primary);
  margin: 0 12px;
  vertical-align: middle;
  opacity: 0.65;
}
.mg-reviews-sub {
  font-size: 13px;
  color: var(--mg-text-sub);
  margin: 0;
  line-height: 1.6;
}
.mg-reviews-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mg-review-card {
  background: var(--mg-bg-card);
  border: 1px solid var(--mg-border);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mg-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mg-review-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mg-bg-soft);
  color: var(--mg-primary-d);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mg-serif-en);
  font-size: 18px; font-weight: 600;
  overflow: hidden; flex-shrink: 0;
}
.mg-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mg-review-meta {
  display: flex; flex-direction: column; gap: 2px;
}
.mg-review-name {
  font-family: var(--mg-sans);
  font-size: 14px; font-weight: 600;
  color: var(--mg-text);
  margin: 0;
}
.mg-review-stars {
  display: inline-flex; gap: 1px;
  color: var(--mg-primary);
  line-height: 1;
}
.mg-review-stars svg { width: 12px; height: 12px; }
.mg-review-stars-empty { color: var(--mg-border-mid); }
.mg-review-quote {
  font-family: var(--mg-serif-cn);
  font-size: 14px;
  color: var(--mg-text);
  line-height: 1.75;
  margin: 0;
  font-style: italic;
}
.mg-review-quote::before {
  content: '“';
  color: var(--mg-primary);
  font-size: 22px;
  margin-right: 4px;
  vertical-align: -4px;
}
.mg-reviews-footer {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 24px;
  text-align: center;
}
.mg-reviews-footer-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--mg-primary);
  text-decoration: none;
  transition: color 0.2s;
}
.mg-reviews-footer-link:hover { color: var(--mg-primary-d); }
@media (max-width: 900px) {
  .mg-reviews-grid {
    grid-template-columns: 1fr;
    display: flex;
    gap: 14px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mg-reviews-grid::-webkit-scrollbar { display: none; }
  .mg-review-card {
    flex: 0 0 78vw;
    scroll-snap-align: center;
  }
}

/* ── §8 Newsletter Sign-up ──────────────────────────── */
.mg-newsletter {
  background: var(--mg-bg-soft);                     /* solid */
  padding: 64px 24px 72px;
  position: relative;
  overflow: hidden;
}
.mg-newsletter::before,
.mg-newsletter::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 140px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.mg-newsletter::before {
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none'><g opacity='0.45'><path d='M30,135 L25,75 L45,40 L70,80 L60,135 Z' fill='%23A8769A' stroke='%2382577A' stroke-width='0.5'/><path d='M45,40 L70,80 L45,95 L25,75 Z' fill='%23ffffff' opacity='0.35'/><path d='M75,135 L80,95 L95,75 L110,95 L105,135 Z' fill='%23A8769A' opacity='0.7'/></g><g opacity='0.5' transform='translate(110 90)'><circle cx='0' cy='10' r='12' fill='%23F4D8DE'/><circle cx='25' cy='15' r='10' fill='%23A8769A' opacity='0.6'/><circle cx='48' cy='12' r='14' fill='%23E0CFE5'/></g></svg>");
  background-position: bottom left;
}
.mg-newsletter::after {
  right: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none'><g opacity='0.45'><path d='M170,135 L165,55 L185,30 L200,55 L195,135 Z' fill='%23A8769A' stroke='%2382577A' stroke-width='0.5'/><path d='M185,30 L200,55 L185,75 L165,55 Z' fill='%23ffffff' opacity='0.4'/><path d='M125,135 L130,90 L145,70 L160,90 L155,135 Z' fill='%23A8769A' opacity='0.7'/></g><g opacity='0.5' transform='translate(45 95)'><circle cx='0' cy='10' r='13' fill='%23E0CFE5'/><circle cx='30' cy='14' r='11' fill='%23F4D8DE'/><circle cx='55' cy='10' r='15' fill='%23A8769A' opacity='0.55'/></g></svg>");
  background-position: bottom right;
}
.mg-newsletter-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.mg-newsletter-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mg-primary);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.mg-newsletter-title {
  /* unified with .mg-tabsec-title / .mg-howit-title for visual consistency */
  font-family: var(--mg-serif-en);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.025em;
  line-height: 1.2;
  color: var(--mg-text);
  margin: 0 0 14px;
}
.mg-newsletter-title-cn { font-family: var(--mg-serif-cn); font-weight: 500; }
.mg-newsletter-desc {
  font-size: 14px;
  color: var(--mg-text-sub);
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.mg-newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.mg-newsletter-input {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--mg-border);
  border-radius: 10px;
  font-family: var(--mg-sans);
  font-size: 14px;
  background: #fff;
  color: var(--mg-text);
  transition: border-color 0.2s;
}
.mg-newsletter-input:focus {
  outline: none;
  border-color: var(--mg-primary);
}
.mg-newsletter-btn {
  padding: 14px 28px;
  background: var(--mg-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--mg-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mg-newsletter-btn:hover {
  background: var(--mg-primary-d);
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  .mg-newsletter-form { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   📱 §M  集中手机端响应式(≤ 768px tablet & mobile,≤ 480px small phone)
   ────────────────────────────────────────────────────────────────────
   下面这一整块是 mobile-specific 覆盖。任何区块在窄屏上的最终视觉以此
   为准 - 修手机问题只改这里。原各区块的 @media 是 desktop→tablet 的
   微调,这里是面向手机的"重排"。
   ════════════════════════════════════════════════════════════════════ */

/* ── 大平板 / 横屏手机 ≤ 1024px ─────────────────────── */
@media (max-width: 1024px) {
  .mg-hero-inner { grid-template-columns: minmax(0, 480px) 1fr; gap: 32px; }
  .mg-trust-strip-inner { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ── 平板 / 大屏手机 ≤ 768px ─────────────────────────── */
@media (max-width: 768px) {

  /* §2 Hero - 无图时:渐变背景 + 顶部漂浮装饰水晶 SVG;有图时:图片推到顶,内容浮底 */
  .mg-hero {
    padding: 56px 16px 48px;
    min-height: auto;
    display: block;
    background-position: center top;
    position: relative;
    overflow: hidden;
  }
  .mg-hero-mask {
    background: transparent;
  }
  /* 无图时:把装饰 SVG 放到顶部,小尺寸,漂浮在内容上方 */
  .mg-hero-deco {
    display: block !important;
    position: absolute;
    top: 12px;
    right: -30px;
    width: 200px;
    height: auto;
    transform: none;
    opacity: 0.42;
    z-index: 1;
    pointer-events: none;
  }
  .mg-hero-deco svg { width: 100%; height: auto; }
  /* 有真图 (v3 新 mobile):图作为 title 背景,title 在左并左对齐,图下紧接 form */
  .mg-hero.has-image {
    padding: 0;
    min-height: auto;
    display: block;          /* content 变回正常文档流 */
    background-image: none;
    overflow: hidden;
    position: relative;
  }
  /* mobile <img> 作为 title 背景:占顶部 65vw 区域 */
  .mg-hero.has-image .mg-hero-bg-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--mg-hero-mask-end, 65%);
    object-fit: cover;
    object-position: var(--mg-hero-mobile-pos-x, 50%) var(--mg-hero-mobile-pos-y, 30%);
    transform: scale(var(--mg-hero-mobile-scale, 1));
    transform-origin: var(--mg-hero-mobile-pos-x, 50%) var(--mg-hero-mobile-pos-y, 30%);
    z-index: 0;
  }
  .mg-hero.has-image::before { display: none; }
  .mg-hero.has-image .mg-hero-deco { display: none !important; }
  /* mask: 双重渐变 - 横向左边重蒙版让 title 可读,纵向底部满蒙版接 form */
  .mg-hero.has-image .mg-hero-mask {
    display: block;
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(251,247,250,0.78) 0%,
        rgba(251,247,250,0.40) 50%,
        rgba(251,247,250,0) 85%),
      linear-gradient(180deg,
        rgba(251,247,250,0) 0%,
        rgba(251,247,250,0) var(--mg-hero-mask-start, 50%),
        rgba(251,247,250,0.94) var(--mg-hero-mask-end, 65%),
        rgba(251,247,250,0.94) 100%);
  }
  .mg-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    display: block;
  }
  .mg-hero-content {
    padding: 0;
    text-align: var(--mg-hero-text-align, left);  /* mobile 默认左对齐 */
  }
  /* title 区 (eyebrow + h1 + desc) — 在图上,左上占 65vw 高 */
  .mg-hero.has-image .mg-hero-text {
    min-height: var(--mg-hero-mask-end, 65vw);  /* 推 form 到图下方 */
    padding: 32px 20px 28px;                     /* title 上/左 + 底 28px gap before form */
    text-align: left;
    box-sizing: border-box;
  }
  .mg-hero.has-image .mg-hero-eyebrow,
  .mg-hero.has-image .mg-hero-title,
  .mg-hero.has-image .mg-hero-desc {
    text-align: left;
    text-shadow: 0 1px 8px rgba(255,255,255,0.85), 0 1px 3px rgba(0,0,0,0.10);
  }
  /* form 区 — 紧跟 title 下面 */
  .mg-hero.has-image .mg-hero-form {
    margin: 0 16px 28px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.65);
  }
  .mg-hero-deco { display: none; }
  .mg-hero::before, .mg-hero::after { display: none; }
  .mg-hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    color: var(--mg-primary-d);
  }
  .mg-hero-title {
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin-bottom: 14px;
    text-shadow: 0 1px 4px rgba(255,255,255,0.6);
  }
  .mg-hero-title-cn { font-size: 28px !important; }
  .mg-hero-desc {
    font-size: 13.5px;
    max-width: 320px;
    margin: 0 0 22px;       /* mobile 默认左对齐 */
    line-height: 1.7;
  }
  .mg-hero.mg-hero-align-center .mg-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .mg-hero.mg-hero-align-right .mg-hero-desc {
    margin-left: auto;
    margin-right: 0;
  }

  /* Hero 表单玻璃化:半透明白底 + 模糊 + 轻边框,精致漂浮感 */
  .mg-hero-form {
    padding: 22px 20px 20px;
    max-width: 100%;
    border-radius: 18px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow:
      0 4px 14px rgba(188,147,171,0.08),
      0 12px 36px rgba(60,40,55,0.10);
  }
  .mg-hero-form-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .mg-hero-form-sub {
    font-size: 12px;
    margin-bottom: 16px;
    line-height: 1.55;
    color: var(--mg-text-sub);
  }
  /* 日期 + 时间一行(并排,小屏也并排避免太高)*/
  .mg-hero-form-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .mg-hero-form-labels { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
  .mg-hero-form-labels label { font-size: 10.5px; letter-spacing: 0.05em; }
  .mg-hero-input {
    font-size: 16px;
    padding: 11px 11px 11px 34px;
    border-radius: 9px;
    background: rgba(255,255,255,0.7);
    border-color: rgba(188,147,171,0.18);
  }
  .mg-hero-input-wrap svg { left: 10px; width: 13px; height: 13px; }
  .mg-hero-cta {
    padding: 13px 20px;
    font-size: 14px;
    min-height: 46px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .mg-hero-form-intent-label {
    font-size: 11px;
    margin-bottom: 6px;
    color: var(--mg-text-sub);
    letter-spacing: 0.04em;
  }

  /* Hero 表单 intent 按钮 (mobile): inactive 正方形 44×44 + icon 居中 */
  .mg-hero-form-intents { gap: 6px; margin-bottom: 14px; }
  .mg-hero-intent {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    gap: 0;
    border-radius: 10px;
    border-width: 1px;
    justify-content: center;
  }
  .mg-hero-intent.is-active {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    gap: 8px;
    justify-content: flex-start;
  }
  .mg-hero-intent svg { width: 18px; height: 18px; }
  .mg-hero-intent .mg-hero-intent-name { font-size: 12px; }
  .mg-hero-intent .mg-hero-intent-sub  { font-size: 10.5px; }
  .mg-hero-form-note {
    font-size: 10px;
    margin-top: 12px;
    color: var(--mg-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  /* §3 Trust Strip - 3 列居中(5 项自然成 3+2 第二行居中) */
  .mg-trust-strip { padding: 22px 14px; }
  .mg-trust-strip-inner {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 10px !important;
  }
  .mg-trust-item {
    flex: 0 0 calc(33.33% - 8px);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 10.5px;
    gap: 6px;
    line-height: 1.4;
  }
  .mg-trust-icon { width: 30px; height: 30px; }
  .mg-trust-icon svg { width: 14px; height: 14px; }
  /* 保留 <br> 让文字两行 */
  .mg-trust-item br { display: inline; }

  /* §3.5 Intentions carousel mobile - 已在 .mg-icc-card 媒体查询里处理 */
  .mg-intentions { padding: 48px 0 36px; }
  .mg-intentions-head { padding: 0 20px; }
  .mg-intentions-title { font-size: 22px; }
  .mg-intentions-sub { font-size: 12.5px; }

  /* §4 How It Works - 移动端单列 4 rows (每卡 icon 左 / 内容右) */
  .mg-howit { padding: 56px 20px; }
  .mg-howit-title { font-size: clamp(20px, 5vw, 26px); margin-bottom: 24px; }
  .mg-howit-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .mg-howit-arrow { display: none !important; }
  .mg-howit-step { padding: 20px 18px 20px 22px; border-radius: 24px; column-gap: 14px; min-height: 96px; }
  .mg-howit-step-watermark { font-size: 72px; top: -6px; left: 6px; }
  .mg-howit-icon { width: 48px; height: 48px; margin: 0; }
  .mg-howit-step-title { font-size: 15px; }
  .mg-howit-step-desc { font-size: 12.5px; }
  .mg-howit-step-cta { font-size: 12.5px; }

  /* §6 Popular Crystals - carousel (sizing in .mg-pop-card media) */
  .mg-popular { padding: 56px 0; }
  .mg-popular-head { padding: 0 20px; align-items: center; gap: 10px; margin-bottom: 20px; }
  .mg-popular-title { font-size: 22px; }
  .mg-popular-link { font-size: 12px; }
  .mg-pop-card { padding: 18px 14px 16px; border-radius: 14px; }
  .mg-pop-name { font-size: 15px; margin-bottom: 4px; }
  .mg-pop-keywords { font-size: 11px; }

  /* §7 Reviews mobile - sizing handled in main carousel media */
  .mg-reviews { padding: 0 0 56px; }
  .mg-reviews-head { padding: 0 20px; }
  .mg-reviews-title { font-size: 22px; }
  .mg-reviews-sub { font-size: 13px; }

  /* §8 Newsletter - 输入框/按钮上下堆叠 */
  .mg-newsletter { padding: 48px 20px 56px; }
  .mg-newsletter::before, .mg-newsletter::after {
    width: 120px; height: 80px; opacity: 0.5;
  }
  .mg-newsletter-title { font-size: clamp(20px, 5vw, 26px); }
  .mg-newsletter-desc { font-size: 13px; margin-bottom: 22px; }
  .mg-newsletter-form { flex-direction: column !important; gap: 10px; }
  .mg-newsletter-input { font-size: 16px; padding: 14px 16px; min-height: 48px; }
  .mg-newsletter-btn { padding: 14px 24px; font-size: 15px; min-height: 48px; justify-content: center; }
}

/* ── 小屏手机 ≤ 480px(细节再压缩)──────────────────── */
@media (max-width: 480px) {

  .mg-hero { padding: 36px 14px 48px; }
  .mg-hero-form { padding: 20px 16px 16px; border-radius: 14px; }
  .mg-hero-form-title { font-size: 16px; }
  .mg-hero-title { font-size: 30px !important; line-height: 1.15 !important; }
  .mg-hero-title-cn { font-size: 26px !important; }

  /* Trust strip 极小屏依然 3 列(只是间距更小) */
  .mg-trust-strip { padding: 18px 12px; }
  .mg-trust-strip-inner { gap: 12px 6px !important; }
  .mg-trust-item { font-size: 10px; gap: 5px; flex-basis: calc(33.33% - 4px); }
  .mg-trust-icon { width: 26px; height: 26px; }
  .mg-trust-icon svg { width: 12px; height: 12px; }

  /* Intentions / Complement / Popular / Trusted / Newsletter 最小 padding */
  .mg-intentions { padding: 48px 14px 32px; }
  .mg-howit { padding: 48px 14px; }
  .mg-popular { padding: 48px 14px; }
  .mg-reviews { padding: 0 0 48px; }
  .mg-newsletter { padding: 40px 14px 48px; }

  /* How It Works 极小屏 - 仍是单列 4 rows */
  .mg-howit-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .mg-howit-step { padding: 18px 14px 18px 16px; border-radius: 20px; column-gap: 10px; min-height: 86px; }
  .mg-howit-step-watermark { font-size: 60px; top: -4px; left: 4px; }
  .mg-howit-icon { width: 42px; height: 42px; margin: 0; }
  .mg-howit-step-title { font-size: 14px; }
  .mg-howit-step-desc { font-size: 12px; line-height: 1.55; }
  .mg-howit-step-cta { font-size: 12px; }

  /* Intentions carousel tiny screen */
  .mg-icc-card { flex: 0 0 80vw; }

  /* Popular Crystals tiny carousel */
  .mg-pop-card { flex: 0 0 70vw; }
  .mg-popular { padding: 48px 0; }


}

/* ── 极小屏 ≤ 360px(老式 iPhone SE 等)─────────────── */
@media (max-width: 360px) {
  .mg-hero-title { font-size: 26px !important; }
  .mg-hero-title-cn { font-size: 22px !important; }
  .mg-pop-card { flex: 0 0 80vw; }
}

/* ── 通用:防 iOS 自动缩放(input 字号 < 16px 会触发 zoom) ── */
@media (max-width: 768px) {
  .mg-home input[type="date"],
  .mg-home input[type="time"],
  .mg-home input[type="email"],
  .mg-home input[type="text"],
  .mg-home input[type="number"],
  .mg-home select,
  .mg-home textarea {
    font-size: 16px !important;
  }
}

/* ── 通用:触摸目标 ≥ 44×44px(WCAG / iOS HIG)──────── */
@media (max-width: 768px) and (pointer: coarse) {
  .mg-home button,
  .mg-home a.mg-hero-cta,
  .mg-home a.mg-pop-card {
    min-height: 44px;
  }
}