/* ==========================================================================
   对比页（vs Swish / Rectangle / Magnet）
   目标：把三张对比页从图纸风收拢到当前首页的暖白 + 橙色语言：胶囊标签、
   紧排大标题、圆角卡片与柔和阴影；同时为「多窗口同时改尺寸」增加一个
   独立卖点区。只在 body.vs-page 下生效，不影响其它页面。
   ========================================================================== */

.vs-page {
  --vs-orange: var(--accent);
  --vs-orange-soft: #ffe9dc;
  --vs-orange-line: #ffd2ba;
  --vs-ink: var(--text);
  --vs-ink-2: #4a3f36;
  --vs-bg-2: var(--bg-soft);
  --vs-green-soft: #e6f5ec;
  background: var(--bg);
  color: var(--vs-ink);
}

/* ---------- 区块节奏 ---------- */
.vs-page .section {
  border-top: 0;
  border-bottom: 0;
  padding: clamp(64px, 8vw, 96px) 0;
  overflow: visible;
}
.vs-page .section > .wrap::before { display: none; }
.vs-page .section--tight {
  padding: clamp(64px, 8vw, 96px) 0 clamp(24px, 3vw, 36px);
}
.vs-page .section--grid {
  background:
    radial-gradient(60% 50% at 85% 0%, #ffe8d8 0%, transparent 60%),
    radial-gradient(50% 40% at 0% 100%, #fff0e4 0%, transparent 60%),
    var(--bg);
}
.vs-page .section--tint {
  background: linear-gradient(180deg, var(--vs-bg-2) 0%, var(--bg) 100%);
}
.vs-page .wrap--narrow { max-width: 860px; }

/* ---------- 封面 ---------- */
.vs-page .sec-head--center { max-width: 920px; margin: 0 auto; }
.vs-page .sec-head--center .sec__head { justify-content: center; }
.vs-page .sec__head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px 11px;
  border: 1px solid var(--vs-orange-line);
  border-radius: 999px;
  background: var(--vs-orange-soft);
}
.vs-page .sec__no,
.vs-page .sec__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vs-orange);
}
.vs-page .sec__no::after { content: " /"; opacity: .55; }
.vs-page .sec-head--center h1 {
  margin-top: 4px;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 650;
}
.vs-page .sec-head p.tagline {
  margin-top: 16px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--vs-orange);
}
.vs-page .sec-head p.lede {
  margin: 18px auto 0;
  max-width: 760px;
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.6;
  color: var(--vs-ink-2);
  text-wrap: pretty;
}

/* ---------- 正文标题 ---------- */
.vs-page .sec-head { margin-bottom: 40px; }
.vs-page .sec-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 650;
}
.vs-page .sec-head p {
  max-width: 780px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--vs-ink-2);
}

/* ---------- 对比表 ---------- */
.vs-page .cmp-wrap {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 28px 60px -44px rgba(70, 35, 15, .45);
  overflow: auto;
}
.vs-page .cmp { min-width: 680px; font-size: 14px; }
.vs-page .cmp th,
.vs-page .cmp td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.vs-page .cmp thead td { background: var(--vs-bg-2); }
.vs-page .cmp thead th {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--vs-bg-2);
}
.vs-page .cmp thead th.is-ours {
  color: #fff;
  background: var(--vs-orange);
  border-bottom-color: var(--vs-orange);
}
.vs-page .cmp tbody th {
  width: 23%;
  font-weight: 600;
  color: var(--vs-ink);
}
.vs-page .cmp .is-ours { background: #fff7f1; }
.vs-page .cmp tbody td.is-ours { color: var(--vs-ink); font-weight: 500; }
.vs-page .cmp tr:last-child th,
.vs-page .cmp tr:last-child td { border-bottom: 0; }
.vs-page .cmp tr.is-key th { color: var(--vs-orange); }
.vs-page .cmp tr.is-key td.is-ours {
  background: var(--vs-orange-soft);
  font-weight: 650;
}

/* ---------- 多窗口同调卖点 ---------- */
.vs-spot { background: var(--bg); }
.vs-spot__in {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.vs-spot__copy .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vs-orange);
}
.vs-spot__copy .kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vs-orange);
}
.vs-spot h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 650;
  color: var(--vs-ink);
  text-wrap: balance;
}
.vs-spot__copy > p {
  margin-top: 16px;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--vs-ink-2);
  text-wrap: pretty;
}
.vs-spot__list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.vs-spot__list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vs-ink-2);
}
.vs-spot__list li::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--vs-green-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.5' fill='none' stroke='%231f7a4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.vs-spot__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--vs-orange);
}
.vs-spot__link span { transition: transform .18s var(--ease); }
.vs-spot__link:hover span { transform: translateX(3px); }

/* 四窗 + 十字分隔线的静态示意图 */
.vs-resize {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid #f0d3c0;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(140deg, #ffe8d8, #f7d5bd 55%, #f2c8ab);
  box-shadow: 0 30px 60px -34px rgba(80, 40, 20, .42);
}
.vs-resize__win {
  position: absolute;
  border: 1px solid #e9d0bd;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(70, 35, 15, .38);
}
.vs-resize__win::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18%;
  min-height: 10px;
  border-bottom: 1px solid #f0e1d5;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #fffdfb, #fbf4ee);
}
.vs-resize__win::after {
  content: "";
  position: absolute;
  left: 9%;
  top: 30%;
  width: 58%;
  height: 3px;
  border-radius: 2px;
  background: #efe5dc;
  box-shadow: 0 7px 0 #f4ece5, 0 14px 0 #f7f1eb;
}
.vs-resize__win--tl { left: 3.5%; top: 5.5%; width: 44%; height: 40.5%; }
.vs-resize__win--tr { left: 52.5%; top: 5.5%; width: 44%; height: 40.5%; }
.vs-resize__win--bl { left: 3.5%; bottom: 5.5%; width: 44%; height: 40.5%; }
.vs-resize__win--br { left: 52.5%; bottom: 5.5%; width: 44%; height: 40.5%; }
.vs-resize__bar {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(210,78,28,.18), var(--vs-orange), rgba(210,78,28,.18));
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}
.vs-resize__bar--v {
  left: 50%;
  top: 5%;
  bottom: 5%;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(210,78,28,.18), var(--vs-orange), rgba(210,78,28,.18));
}
.vs-resize__bar--h {
  top: 50%;
  left: 3.5%;
  right: 3.5%;
  height: 4px;
  transform: translateY(-50%);
}
.vs-resize__handle {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 2px solid var(--vs-orange);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(210, 78, 28, .12), 0 8px 20px -8px rgba(80, 40, 20, .5);
  transform: translate(-50%, -50%);
}
.vs-resize__handle::before,
.vs-resize__handle::after {
  content: "";
  position: absolute;
  background: var(--vs-orange);
  border-radius: 2px;
}
.vs-resize__handle::before { left: 8px; right: 8px; top: 50%; height: 1.6px; transform: translateY(-50%); }
.vs-resize__handle::after { top: 8px; bottom: 8px; left: 50%; width: 1.6px; transform: translateX(-50%); }
.vs-resize__cursor {
  position: absolute;
  z-index: 5;
  left: 50.5%;
  top: 50.5%;
  width: 22px;
  height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(60, 30, 15, .28));
}
.vs-spot__cap {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .vs-resize__win--tl,
  .vs-resize__win--bl {
    will-change: width;
    animation: vsWinLeft 5.6s var(--ease) infinite;
  }
  .vs-resize__win--tr,
  .vs-resize__win--br {
    will-change: left, width;
    animation: vsWinRight 5.6s var(--ease) infinite;
  }
  .vs-resize__bar--v { animation: vsBarV 5.6s var(--ease) infinite; }
  .vs-resize__handle {
    animation:
      vsBarV 5.6s var(--ease) infinite,
      vsHandlePulse 2.8s var(--ease) infinite;
  }
  .vs-resize__cursor {
    will-change: left, top;
    animation: vsCursor 5.6s var(--ease) infinite;
  }

  @keyframes vsWinLeft {
    0%, 12%, 88%, 100% { width: 44%; }
    38%, 62% { width: 50%; }
  }
  @keyframes vsWinRight {
    0%, 12%, 88%, 100% { left: 52.5%; width: 44%; }
    38%, 62% { left: 58.5%; width: 38%; }
  }
  @keyframes vsBarV {
    0%, 12%, 88%, 100% { left: 50%; }
    38%, 62% { left: 56%; }
  }
  @keyframes vsCursor {
    0%, 12%, 88%, 100% { left: 50.5%; top: 50.5%; }
    38%, 62% { left: 57.4%; top: 51%; }
  }
  @keyframes vsHandlePulse {
    0%, 100% { box-shadow: 0 0 0 7px rgba(210, 78, 28, .12), 0 8px 20px -8px rgba(80, 40, 20, .5); }
    50% { box-shadow: 0 0 0 12px rgba(210, 78, 28, .07), 0 8px 20px -8px rgba(80, 40, 20, .5); }
  }
}

/* ---------- 选择卡 ---------- */
.vs-page .vs-choose { gap: 20px; }
.vs-page .vs-pick {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 30px;
  box-shadow: 0 22px 50px -40px rgba(70, 35, 15, .35);
}
.vs-page .vs-pick--ours {
  border-color: var(--vs-orange-line);
  background: linear-gradient(180deg, #fff 0%, #fff8f3 100%);
  box-shadow: 0 26px 60px -36px rgba(210, 78, 28, .45);
}
.vs-page .vs-pick__top { margin-bottom: 18px; }
.vs-page .vs-pick h3 { font-size: 18px; }
.vs-page .vs-badge { background: var(--vs-orange); }
.vs-page .vs-list li { font-size: 14px; }
.vs-page .vs-list--check li::before { border-color: var(--vs-orange); }

/* ---------- FAQ ---------- */
.vs-page .faq {
  margin-top: 8px;
  padding: 0 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 22px 50px -42px rgba(70, 35, 15, .35);
}
.vs-page .faq details:last-child { border-bottom: 0; }
.vs-page .faq summary {
  padding: 20px 0;
  font-size: 15.5px;
  font-weight: 600;
}
.vs-page .faq summary:hover { color: var(--vs-orange); }
.vs-page .faq summary::after { content: none; }
.vs-page .faq summary i {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vs-bg-2);
  transition: background .2s var(--ease);
}
.vs-page .faq summary i::before,
.vs-page .faq summary i::after {
  content: "";
  position: absolute;
  background: var(--muted);
  border-radius: 2px;
  transition: transform .25s var(--ease);
}
.vs-page .faq summary i::before { top: 9.25px; left: 5px; width: 10px; height: 1.5px; }
.vs-page .faq summary i::after { top: 5px; left: 9.25px; width: 1.5px; height: 10px; }
.vs-page .faq details[open] summary i { background: var(--vs-orange-soft); }
.vs-page .faq details[open] summary i::after { transform: scaleY(0); }
.vs-page .faq details p {
  padding: 0 36px 20px 0;
  max-width: 70ch;
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- 其它对比入口 ---------- */
.vs-page .cmp-links {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.vs-page .cmp-links__item {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 15px;
}
.vs-page .cmp-links__item:hover { border-color: var(--vs-orange); }

@media (max-width: 820px) {
  .vs-spot__in { grid-template-columns: 1fr; }
  .vs-spot__figure { order: -1; }
  .vs-page .wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 520px) {
  .vs-page .faq { padding: 0 18px; }
  .vs-page .vs-pick { padding: 24px 20px; }
}