@charset "UTF-8";
/* ============================================================
   price.html 独有样式 · 校园展板风
   骨架：三档价格大卡(中档高亮) → 三列配置表 → 编号费用构成
        → 藏青承诺条 → 签约图文 → 六格增值服务 → 手风琴
============================================================ */

/* ---------- 价格卡 ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.price-card{
  position:relative;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:34px 30px;display:flex;flex-direction:column;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card.hot{border:2px solid var(--gold-500);box-shadow:var(--shadow-gold)}
.p-hot{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--navy-900);color:var(--gold-300);
  font-size:12.5px;font-weight:700;padding:5px 18px;border-radius:var(--r-pill);white-space:nowrap;
}
.p-head h3{font-size:20px;margin-bottom:4px}
.p-head p{font-size:13px;color:var(--muted);margin-bottom:18px}
.p-num{font-family:var(--font-head);font-weight:800;color:var(--navy-900);font-size:40px;margin-bottom:20px}
.p-num span{font-size:16px;color:var(--gold-500)}
.p-list{margin-bottom:26px;flex:1}
.p-list li{
  font-size:14px;color:var(--ink-2);padding:9px 0 9px 26px;position:relative;
  border-bottom:1px dashed var(--line);line-height:1.6;
}
.p-list li::before{
  content:"";position:absolute;left:0;top:13px;width:15px;height:15px;border-radius:50%;
  background:var(--gold-200) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23C9A96A" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/10px no-repeat;
}
.price-card .btn{justify-content:center}

/* ---------- 配置对比表 ---------- */
.cmp-table{border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line)}
.cmp-row{display:grid;grid-template-columns:1.2fr 1fr 1.4fr 1.2fr;padding:14px 22px;font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-row:not(.cmp-head):hover{background:var(--white)}
.cmp-row span:first-child{font-weight:700;color:var(--navy-900)}
.cmp-head{background:var(--navy-900);color:var(--gold-300);font-weight:700;font-size:13.5px;letter-spacing:1px}

/* ---------- 费用构成 ---------- */
.fee-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fee-card{background:var(--paper);border-radius:var(--r-md);padding:26px 24px;border-top:4px solid var(--gold-500)}
.fee-no{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--gold-500)}
.fee-card h3{font-size:16.5px;margin:8px 0 8px}
.fee-card p{font-size:13.5px;color:var(--ink-2);line-height:1.8}

/* ---------- 承诺条（藏青） ---------- */
.promise-strip{padding:44px 0;text-align:center}
.promise-strip h2{color:var(--white);font-size:clamp(20px,2.6vw,28px);margin-bottom:22px}
.promise-strip h2 em{font-style:normal;color:var(--gold-400)}
.promise-chips{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.promise-chips span{
  padding:10px 22px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.25);color:#E9ECF5;font-size:14px;
}

/* ---------- 签约图文 ---------- */
.sign-split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.sign-photo img{width:100%;height:330px;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.sign-copy .sec-title{margin-bottom:14px}

/* ---------- 增值服务 ---------- */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.addon-card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);padding:24px 26px;transition:transform var(--t-fast),border-color var(--t-fast)}
.addon-card:hover{transform:translateY(-4px);border-color:var(--gold-400)}
.addon-card h3{font-size:16.5px;margin-bottom:8px}
.addon-card p{font-size:13.5px;color:var(--ink-2);line-height:1.8}

/* ---------- 手风琴 ---------- */
.faq-col{max-width:860px;margin:0 auto}
.faq-list .faq-item{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;padding:18px 22px;font-size:15px;font-weight:700;color:var(--navy-900)}
.faq-q::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold-500);color:var(--gold-500);display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform var(--t-fast)}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-a{max-height:320px}
.faq-a p{padding:0 22px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.9}

/* ---------- 错峰 ---------- */
.rv1{--d:.08s}.rv2{--d:.16s}.rv3{--d:.24s}.rv4{--d:.32s}.rv5{--d:.4s}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .price-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .fee-row{grid-template-columns:repeat(2,1fr)}
  .addon-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .sign-split{grid-template-columns:1fr;gap:28px}
  .cmp-row{grid-template-columns:1fr 1fr;gap:4px 12px}
  .cmp-row span:nth-child(4){display:none}
}
@media (max-width:640px){
  .fee-row,.addon-grid{grid-template-columns:1fr}
}