/* ==========================================================================
   CKVPN · pricing.css
   套餐页(plans.html)专属样式
   页首 / 选档建议 / 均含清单 / 对比表 / 支付方式 / 退款承诺 / FAQ 收尾
   ========================================================================== */

/* ---- 页首 ---- */
.plans-head{
  padding-top:clamp(48px,7vw,92px);
  padding-bottom:clamp(28px,4vw,52px);
}
.plans-head h1{
  margin-top:14px;
  font-size:clamp(30px,4.4vw,46px);
  font-weight:900;
  letter-spacing:.01em;
}
.plans-lede{
  margin-top:16px;
  max-width:680px;
  font-size:15px;
  line-height:1.9;
  color:var(--text-muted);
}
.plans-lede strong{color:var(--text)}
.plans-chips{margin-top:24px}
.plans-trial{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}
.plans-trial-note{
  font-size:13px;
  color:var(--text-muted);
}

/* ---- 档位 tab 与规则说明 ---- */
.plans-tabs{margin-top:28px}
.plans-rule{margin-top:24px}

/* ---- 选档建议 ---- */
.fit-list{
  margin-top:36px;
  border-top:1px solid var(--border);
}
.fit-row{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:32px;
  padding-top:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border);
  transition:background-color .22s ease;
}
.fit-row:hover{background:var(--bg-panel)}
.fit-row > *{min-width:0}
.fit-tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent);
}
.fit-tag .fit-price{
  display:block;
  margin-top:8px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
}
.fit-body h3{
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
}
.fit-body p{
  margin-top:10px;
  max-width:680px;
  font-size:14px;
  line-height:1.9;
  color:var(--text-muted);
}
@media (max-width:640px){
  .fit-row{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
}

/* ---- 均含清单 ---- */
.incl-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:32px;
}
.incl-grid > li{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding-top:15px;
  padding-bottom:15px;
  padding-left:20px;
  padding-right:20px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}
.incl-grid > li::before{
  content:"";
  width:9px;
  height:4px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
  flex-shrink:0;
}
@media (max-width:760px){
  .incl-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- 对比表 ---- */
#compare .table-scroll{
  margin-top:32px;
  border:1px solid var(--border);
}
.compare-table{min-width:760px}
.compare-table thead th:first-child{width:120px}
.compare-table td em{
  color:var(--accent);
  font-style:normal;
}

/* ---- 支付方式 ---- */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:32px;
}
.pay-grid > *{min-width:0}
.pay-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding-top:24px;
  padding-bottom:22px;
  padding-left:24px;
  padding-right:24px;
  transition:border-color .22s ease,background-color .22s ease;
}
.pay-card:hover{
  border-color:var(--accent-dark);
  background:var(--bg-panel2);
}
.pay-ico{
  display:block;
  width:30px;
  height:30px;
  color:var(--accent);
}
.pay-ico svg{
  display:block;
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:1.3;
}
.pay-name{
  margin-top:14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
.pay-note{
  margin-top:6px;
  font-size:13px;
  line-height:1.85;
  color:var(--text-muted);
}
@media (max-width:760px){
  .pay-grid{grid-template-columns:minmax(0,1fr)}
}

.pay-flow{
  margin-top:28px;
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  background:var(--bg-panel);
  padding-top:20px;
  padding-bottom:20px;
  padding-left:24px;
  padding-right:24px;
}
.pay-flow h3{
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
}
.pay-flow p{
  margin-top:8px;
  font-size:14px;
  line-height:1.9;
  color:var(--text-muted);
  max-width:820px;
}

/* ---- 退款承诺 ---- */
.refund-box{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px 48px;
  border:1px solid var(--accent-dark);
  background:var(--bg-panel);
  padding-top:36px;
  padding-bottom:36px;
  padding-left:clamp(24px,4vw,48px);
  padding-right:clamp(24px,4vw,48px);
}
.refund-mark{
  flex-shrink:0;
  text-align:center;
  border:1px solid var(--border);
  padding-top:20px;
  padding-bottom:18px;
  padding-left:34px;
  padding-right:34px;
}
.refund-days{
  font-family:var(--font-mono);
  font-size:52px;
  font-weight:700;
  line-height:1;
  color:var(--accent);
}
.refund-unit{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--text-muted);
}
.refund-body{flex:1;min-width:240px}
.refund-body h2{
  font-size:clamp(20px,2.6vw,26px);
  font-weight:800;
}
.refund-body p{
  margin-top:12px;
  font-size:14px;
  line-height:1.9;
  color:var(--text-muted);
}
.refund-body strong{color:var(--text)}
.refund-body a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-dark);
}
.refund-body a:hover{
  color:var(--text);
  border-bottom-color:var(--text);
}

/* ---- FAQ 收尾 ---- */
.plans-faq{margin-top:32px;max-width:820px}
.plans-faq-more{
  margin-top:24px;
  font-size:13.5px;
  color:var(--text-muted);
}
.plans-faq-more a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-dark);
}
.plans-faq-more a:hover{
  color:var(--text);
  border-bottom-color:var(--text);
}