/* ============================================================
   page-jiage.css — 建站价格套餐总览
   签名布局：三档价格卡对比（中间卡高亮放大）+ 包含项对比表
   作用域：body.page-jiage
   ============================================================ */

/* ---------- Hero 热线小字 ---------- */
.jg-hero .hero-hotline{margin-top:18px;font-size:14px;color:var(--c-muted)}

/* ---------- 三档价格卡 ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.price-card{position:relative;background:#fff;border:1.5px solid var(--c-line);border-radius:var(--radius-lg);padding:34px 30px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.price-hot{border:2px solid var(--c-purple-300);transform:scale(1.04);background:linear-gradient(180deg,#fff 0%,var(--c-bg-purple) 100%)}
.price-hot:hover{transform:scale(1.04) translateY(-6px)}
.price-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--grad-main);color:#fff;font-size:12.5px;font-weight:700;padding:6px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px rgba(197,174,239,.5)}
.price-card-head{margin-bottom:18px}
.price-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--c-purple-400);background:var(--c-purple-100);padding:4px 12px;border-radius:999px;margin-bottom:12px}
.price-tag-hot{background:var(--grad-main);color:#fff}
.price-card h3{font-size:24px;font-weight:800}
.price-sub{margin-top:6px;color:var(--c-muted);font-size:14px}
.price-num{margin:10px 0 20px;padding-bottom:20px;border-bottom:1px dashed var(--c-line);color:var(--c-ink)}
.price-num em{font-style:normal;font-size:20px;font-weight:700;vertical-align:top;margin-right:2px}
.price-num{font-size:46px;font-weight:800;letter-spacing:-.01em}
.price-num small{display:block;font-size:13px;font-weight:500;color:var(--c-muted);margin-top:4px;letter-spacing:0}
.price-list{flex:1;margin-bottom:24px}
.price-list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:14px;color:var(--c-text);line-height:1.7}
.price-list li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:5px;background:var(--c-pink-100) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z" fill="%23A98AE6"/></svg>') center/11px no-repeat}
.price-list li.price-off{color:var(--c-muted);padding-left:0}
.price-list li.price-off::before{display:none}
.btn-block{display:flex;width:100%}

/* ---------- 对比表 ---------- */
.cmp-wrap{overflow-x:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.cmp-table{width:100%;border-collapse:collapse;background:#fff;min-width:680px}
.cmp-table th,.cmp-table td{padding:15px 18px;text-align:center;font-size:14px;border-bottom:1px solid var(--c-line)}
.cmp-table thead th{background:var(--c-bg-purple);color:var(--c-ink);font-weight:700;font-size:15px}
.cmp-table tbody th,.cmp-table td:first-child{text-align:left;font-weight:600;color:var(--c-ink)}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table .cmp-hot{background:var(--c-bg-pink);font-weight:700;color:var(--c-ink)}
.cmp-note{margin-top:18px;font-size:14px;color:var(--c-muted)}
.cmp-note a{color:var(--c-purple-400);font-weight:600}
.cmp-note a:hover{color:var(--c-pink-400)}

/* ---------- 价格梯度横卷卡片 ---------- */
.grad-card{flex:0 0 280px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:26px 24px;box-shadow:var(--shadow-card)}
.grad-no{display:inline-block;font-size:22px;font-weight:800;color:var(--c-purple-400)}
.grad-card h3{margin:10px 0 8px;font-size:18px}
.grad-card p{font-size:13.5px;color:var(--c-text)}

/* ---------- 定制说明 ---------- */
.cust-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.cust-text p{margin-bottom:14px}
.cust-text a{color:var(--c-purple-400);font-weight:600}
.cust-text a:hover{color:var(--c-pink-400)}
.cust-list{background:#fff;border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-card)}
.cust-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px dashed var(--c-line);font-size:14px}
.cust-list li:last-child{border-bottom:0}
.cust-list strong{flex:none;color:var(--c-ink)}
.cust-list span{color:var(--c-muted);text-align:right}

/* ---------- 付款节奏 ---------- */
.pay-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pay-step{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:26px 22px;box-shadow:var(--shadow-card);position:relative}
.pay-no{font-size:13px;font-weight:800;color:var(--c-pink-400);letter-spacing:.1em}
.pay-step h3{margin:8px 0 8px;font-size:18px}
.pay-step p{font-size:13.5px;color:var(--c-text)}

/* ---------- FAQ ---------- */
.faq-list{max-width:860px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);margin-bottom:14px;overflow:hidden;transition:box-shadow .3s}
.faq-item[open]{box-shadow:var(--shadow-card)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;color:var(--c-ink);font-size:15.5px;position:relative;padding-right:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--c-purple-400);transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{padding:0 22px 20px;font-size:14px;color:var(--c-text)}

/* ---------- 底部 CTA ---------- */
.cta-sec{background:var(--grad-soft)}
.cta-box{text-align:center;max-width:760px;margin:0 auto;padding:56px 30px;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-soft)}
.cta-box h2{margin-bottom:14px}
.cta-box p{color:var(--c-text)}
.cta-note{margin-top:18px;font-size:13.5px;color:var(--c-muted)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .price-grid{gap:18px}
  .price-hot{transform:none}
  .price-hot:hover{transform:translateY(-6px)}
  .pay-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .price-grid{grid-template-columns:1fr;gap:30px}
  .cust-wrap{grid-template-columns:1fr;gap:28px}
  .pay-row{grid-template-columns:1fr}
  .price-num{font-size:38px}
}
@media (max-width:360px){
  .price-card{padding:26px 20px}
  .cust-list li{flex-direction:column;gap:4px}
  .cust-list span{text-align:left}
}