/* ============================================================
   gaiban.html — 网站改版升级页独有样式
   命名空间：body.page-gaiban
   签名布局：前后对比对照卡 + 防降权五步迁移流程
   ============================================================ */

body.page-gaiban .hero-note{margin-top:18px;font-size:13.5px;color:var(--c-muted)}
body.page-gaiban .hero-note a{color:var(--c-purple-400);font-weight:600}

/* ---------- 前后对比 ---------- */
body.page-gaiban .ba-row{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch}
body.page-gaiban .ba-card{position:relative;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:34px 30px;box-shadow:var(--shadow-card)}
body.page-gaiban .ba-before{border-top:4px solid var(--c-purple-300)}
body.page-gaiban .ba-after{border-top:4px solid var(--c-pink-400)}
body.page-gaiban .ba-tag{position:absolute;top:-14px;left:26px;font-size:12px;font-weight:800;letter-spacing:.1em;
  padding:5px 14px;border-radius:999px;color:#fff}
body.page-gaiban .ba-before .ba-tag{background:var(--c-purple-300)}
body.page-gaiban .ba-after .ba-tag{background:var(--c-pink-400)}
body.page-gaiban .ba-card ul{list-style:none}
body.page-gaiban .ba-card li{position:relative;padding-left:22px;margin-bottom:12px;font-size:14.5px;color:var(--c-text)}
body.page-gaiban .ba-before li::before{content:"×";position:absolute;left:0;top:0;color:var(--c-muted);font-weight:700}
body.page-gaiban .ba-after li::before{content:"✓";position:absolute;left:0;top:0;color:var(--c-pink-400);font-weight:700}
body.page-gaiban .ba-arrow{display:flex;align-items:center;justify-content:center}

/* ---------- 迁移五步 ---------- */
body.page-gaiban .mig-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:mig}
body.page-gaiban .mig-item{position:relative;background:#fff;border:1px dashed var(--c-purple-200);border-radius:var(--radius-md);
  padding:26px 20px 22px}
body.page-gaiban .mig-num{display:block;font-size:28px;font-weight:800;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px}
body.page-gaiban .mig-item h3{font-size:16px;margin-bottom:8px}
body.page-gaiban .mig-item p{font-size:13.5px;color:var(--c-muted)}

/* ---------- 改版收益横滑 ---------- */
body.page-gaiban .gain-card{flex:0 0 240px;background:var(--grad-soft);border:1px solid var(--c-line);
  border-radius:var(--radius-md);padding:28px 24px;box-shadow:var(--shadow-card)}
body.page-gaiban .gain-card strong{display:block;font-size:30px;font-weight:800;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
body.page-gaiban .gain-card p{font-size:13.5px;color:var(--c-text)}
body.page-gaiban .h-scroll-hint{margin-top:14px;margin-left:2px}

/* ---------- 适用场景 ---------- */
body.page-gaiban .scene-sec{display:grid;grid-template-columns:1fr 1.4fr;gap:44px;align-items:start}
body.page-gaiban .scene-txt h2{margin:12px 0 14px}
body.page-gaiban .scene-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.page-gaiban .scene-item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:22px;
  box-shadow:var(--shadow-card)}
body.page-gaiban .scene-item h3{font-size:16px;margin-bottom:8px}
body.page-gaiban .scene-item p{font-size:13.5px;color:var(--c-text)}

/* ---------- FAQ ---------- */
body.page-gaiban .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
body.page-gaiban .faq-item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:20px 24px}
body.page-gaiban .faq-item summary{cursor:pointer;font-weight:700;color:var(--c-ink);font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
body.page-gaiban .faq-item summary::-webkit-details-marker{display:none}
body.page-gaiban .faq-item summary::after{content:"+";font-size:20px;color:var(--c-purple-400)}
body.page-gaiban .faq-item[open] summary::after{content:"−"}
body.page-gaiban .faq-item p{margin-top:12px;font-size:14px;color:var(--c-text)}
body.page-gaiban .faq-item a{color:var(--c-purple-400);font-weight:600}

/* ---------- CTA ---------- */
body.page-gaiban .cta-band{background:var(--grad-soft);border-top:1px solid var(--c-line);padding:70px 0}
body.page-gaiban .cta-in{text-align:center;max-width:760px;margin:0 auto}
body.page-gaiban .cta-in img{border-radius:var(--radius-lg);margin:0 auto 26px;box-shadow:var(--shadow-soft)}
body.page-gaiban .cta-in h2{margin-bottom:14px}
body.page-gaiban .cta-in>p{margin-bottom:24px;color:var(--c-text)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  body.page-gaiban .ba-row{grid-template-columns:1fr;gap:30px}
  body.page-gaiban .ba-arrow{transform:rotate(90deg)}
  body.page-gaiban .mig-steps{grid-template-columns:repeat(3,1fr)}
  body.page-gaiban .scene-sec{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
  body.page-gaiban .faq-list{grid-template-columns:1fr}
  body.page-gaiban .scene-list{grid-template-columns:1fr}
}
@media (max-width:360px){
  body.page-gaiban .mig-steps{grid-template-columns:1fr 1fr}
  body.page-gaiban .gain-card{flex:0 0 210px;padding:22px}
}