* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f3ff;
  color: #2e1065;
  line-height: 1.66;
}
.plum-top {
  background: #5b21b6;
  color: #f5f3ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.72rem 1.5rem;
}
.plum-mark { display: flex; align-items: center; gap: 0.45rem; font-weight: 750; }
.plum-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.plum-nav a { color: #ddd6fe; text-decoration: none; font-size: 0.92rem; }
.plum-nav a:hover { color: #fff; }
.plum-body { max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.wave-hero { margin-bottom: 1.4rem; }
.wave-hero h1 { font-size: 1.78rem; line-height: 1.35; margin-bottom: 0.7rem; }
.wave-hero p { margin-bottom: 0.45rem; max-width: 44rem; }
.wave-deco { width: 100%; height: 78px; display: block; margin-top: 0.8rem; }
.mason-stack {
  column-count: 2;
  column-gap: 1rem;
}
.mason-tight { margin-top: 0.6rem; }
.mason-card {
  break-inside: avoid;
  background: #fff;
  border: 1px solid #ddd6fe;
  padding: 0.95rem 1rem 1.05rem;
  margin-bottom: 1rem;
}
.mason-card h2, .mason-card h3 { font-size: 1.08rem; margin: 0.25rem 0 0.4rem; }
.mason-card p { font-size: 0.95rem; margin-bottom: 0.34rem; }
.mason-card svg { color: #5b21b6; }
.spine-sec { margin: 1.8rem 0 1.2rem; }
.spine-sec > h2 { font-size: 1.22rem; margin-bottom: 0.4rem; }
.spine-sec > p { margin-bottom: 0.8rem; }
.spine { list-style: none; border-left: 4px solid #5b21b6; margin-left: 0.7rem; }
.spine li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.7rem;
  padding: 0 0 1.1rem 0.9rem;
  position: relative;
}
.spine em {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5b21b6;
  position: absolute;
  left: -9px;
  top: 0.25rem;
}
.spine strong { display: block; margin-bottom: 0.25rem; }
.spine p { font-size: 0.95rem; margin-bottom: 0.28rem; }
.ear-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 1.6rem 0;
}
.ear-listen, .ear-record { padding: 1.15rem 1.2rem 1.25rem; }
.ear-listen { background: #5b21b6; color: #ede9fe; }
.ear-record { background: #4c1d95; color: #f5f3ff; }
.ear-pair h2 { font-size: 1.12rem; margin: 0.3rem 0 0.45rem; }
.ear-pair p { margin-bottom: 0.35rem; }
.bound-sec { margin: 1.4rem 0; }
.bound-sec > h2 { font-size: 1.22rem; margin-bottom: 0.6rem; }
.plum-faq { margin: 1.8rem 0 1rem; }
.plum-faq h2 { margin-bottom: 0.7rem; }
.voice-item { background: #fff; border-left: 4px solid #7c3aed; margin-bottom: 0.55rem; }
.voice-sum { cursor: pointer; padding: 0.75rem 0.9rem; font-weight: 700; }
.voice-ans { padding: 0 0.9rem 0.85rem; }
.voice-item[open] { border-left-color: #5b21b6; }
.voice-sum:hover { background: #ede9fe; }
.mason-card:hover { border-color: #7c3aed; }
.wave-hero { padding-bottom: 0.4rem; }
.spine li:last-child { padding-bottom: 0; }
.ear-listen svg, .ear-record svg { color: #ddd6fe; }
.plum-body h2 { letter-spacing: 0.01em; }
.mason-card h2 { color: #5b21b6; }
.plum-mark svg { color: #ddd6fe; }
.mason-card h3 { color: #4c1d95; }
.spine strong { color: #5b21b6; }
.bound-sec { padding-top: 0.2rem; }
.voice-ans p { color: #4c1d95; }
.plum-body { min-width: 0; }
.mason-stack { orphans: 1; widows: 1; }
.wave-hero h1 { color: #4c1d95; }
.ear-pair h2 { letter-spacing: 0.01em; }
.spine-sec { padding-left: 0.2rem; }
.site-footer {
  background: #2e1065;
  color: #ddd6fe;
  padding: 1.25rem 1.4rem;
  font-size: 0.86rem;
}
.site-footer p { margin-bottom: 0.28rem; }
@media (max-width: 800px) {
  .mason-stack { column-count: 1; }
  .ear-pair { grid-template-columns: 1fr; }
  .plum-top { flex-direction: column; align-items: flex-start; }
  .wave-deco { height: 56px; }
}