/* 升级 PRO 页：整页排版参考流媒体订阅页的常见做法——
   顶部一屏讲价值，接着免费／PRO 两栏对照，再按顺序逐条列权益，最后答疑。
   配色、字体沿用站内 customize.css 的那一套变量，不另起一套。 */
.pro-page{background:radial-gradient(ellipse at 50% -10%,#3a2c1a 0,transparent 55%),
  radial-gradient(ellipse at 85% 100%,rgba(140,48,39,.16) 0,transparent 55%),var(--bg)}
.pro{max-width:980px;margin:auto;padding:8px 24px 70px}
.hero{text-align:center;padding:26px 0 40px}
.hero .eyebrow{letter-spacing:.34em}
.pro h1{font:400 clamp(30px,5.4vw,50px)/1.35 "Songti SC",STSong,serif;letter-spacing:.09em;
  margin:14px 0 14px;background:linear-gradient(180deg,#f0d9a6,#b9944d);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:600px;margin:0 auto 26px;font-size:15px;line-height:2;color:var(--muted);letter-spacing:.04em}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.primary.big{padding:15px 42px;font-size:15px;letter-spacing:.16em;border-radius:10px}
.fineprint{margin:16px 0 0;font-size:11.5px;line-height:1.9;color:#8a8070;text-align:center}
.block-title{font:400 20px/1.6 "Songti SC",serif;letter-spacing:.14em;margin:0 0 20px;color:var(--ink)}

.plans{padding:34px 0 10px;border-top:1px solid var(--line)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plan{position:relative;padding:24px 22px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.plan.is-pro{border-color:#8a6c3c;background:linear-gradient(180deg,#241d14,#181410);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.plan-tag{position:absolute;top:-11px;left:22px;padding:4px 11px;border-radius:20px;
  background:linear-gradient(135deg,#e0b86a,#a8853f);color:#20190f;font-size:10px;letter-spacing:.14em}
.plan-name{font:400 17px/1.5 "Songti SC",serif;letter-spacing:.14em;color:var(--ink)}
.plan-price{margin:6px 0 16px;font-size:12.5px;color:var(--muted);line-height:1.8}
.plan-list{list-style:none;margin:0 0 18px;padding:0}
.plan-list li{position:relative;padding:0 0 0 22px;margin:9px 0;font-size:13px;line-height:1.85;color:var(--muted)}
.plan-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-size:12px}
.plan-list li.no{color:#6f6758}
.plan-list li.no::before{content:"—";color:#6f6758}
.plan.is-pro .plan-list li{color:var(--ink)}
.plan .primary{width:100%}
.plan .text-button{display:block;width:100%;text-align:center}
#message{min-height:38px;color:var(--gold);font-size:12.5px;line-height:1.8;text-align:center;margin:14px 0 0}

.benefits-block{padding:34px 0 10px;border-top:1px solid var(--line);margin-top:30px}
.benefits{list-style:none;counter-reset:b;margin:0;padding:0;display:grid;gap:10px}
.benefits li{counter-increment:b;display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.benefits li::before{content:counter(b,decimal-leading-zero);font:12px/1.7 system-ui,sans-serif;
  letter-spacing:.06em;color:#8a6c3c}
.benefits h3{margin:0 0 6px;font:400 15.5px/1.6 "Songti SC",serif;letter-spacing:.1em;color:var(--gold)}
.benefits p{margin:0;font-size:13px;line-height:1.95;color:var(--muted)}
.benefits .where{display:block;margin-top:7px;font-size:11px;color:#8a8070;letter-spacing:.02em}

.faq{padding:34px 0 0;border-top:1px solid var(--line);margin-top:30px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:16px 0;font-size:13.5px;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";float:right;color:var(--muted)}
.faq details[open] summary::after{content:"－"}
.faq p{margin:0 0 16px;font-size:12.5px;line-height:2;color:var(--muted)}

@media(max-width:700px){
  .pro{padding:4px 18px 50px}
  .plan-grid{grid-template-columns:1fr}
  .hero{padding:14px 0 28px}
  .benefits li{grid-template-columns:26px 1fr;gap:10px;padding:15px 16px}
}

/* PRO 清单里「专属古琴」那一条右边的「体验」 */
.plan-list li.has-try{display:flex;align-items:center;gap:10px;padding-right:0}
.plan-list li.has-try .trybtn{margin-left:auto;flex:0 0 auto;padding:6px 14px;border-radius:20px;
  border:1px solid var(--gold);background:transparent;color:var(--gold);font-size:11.5px;letter-spacing:.1em}
.plan-list li.has-try .trybtn:hover{background:var(--gold);color:#20190f}

/* 兑换码：平时收起来，点「已有兑换码」才展开 */
.redeem{display:flex;gap:8px;margin-top:10px}
.redeem[hidden]{display:none}
.redeem input{flex:1 1 auto;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;
  background:#1a1611;color:var(--ink);font:13px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;
  text-transform:uppercase}
.redeem input:focus{outline:none;border-color:var(--gold)}
.redeem .secondary{flex:0 0 auto;padding:11px 18px}

/* 付款：选通道 → 微信出二维码 / 支付宝跳收银台 → 轮询到账 */
.pay{margin-top:12px}
.pay[hidden]{display:none}
.pay-channels{display:flex;gap:8px}
.pay-channels button{flex:1 1 0;padding:11px 0;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font-size:13px;letter-spacing:.08em}
.pay-channels button.on{border-color:var(--gold);color:var(--gold)}
.pay-qr{margin:14px auto 0;width:180px;height:180px;display:flex;align-items:center;justify-content:center;
  padding:10px;border-radius:10px;background:#fffdf6}
.pay-qr[hidden]{display:none}
.pay-qr svg{width:100%;height:100%}
.pay-state{margin:10px 0 0;font-size:12px;line-height:1.8;color:var(--muted);text-align:center}

/* 商品价格与简介要在页面上直接看得见：支付审核要拍这一屏 */
.plan-amount{margin:8px 0 2px;font:400 34px/1.2 "Songti SC",serif;letter-spacing:.02em;color:var(--gold)}
.plan-amount::after{content:" 元 · 一次买断";font-size:13px;letter-spacing:.1em;color:var(--muted)}
html[lang="en"] .plan-amount::after{content:" CNY · one-time"}
.plan-blurb{margin:8px 0 16px;font-size:12.5px;line-height:1.95;color:var(--muted)}

/* 我的授权码：买过或兑换过之后一直显示在这儿，换设备靠它恢复 */
.mycode{margin:12px 0 0;padding:11px 13px;border:1px dashed #8a6c3c;border-radius:9px;
  font:12.5px/1.8 system-ui,-apple-system,sans-serif;color:var(--muted);word-break:break-all}
.mycode[hidden]{display:none}
.mycode b{display:block;margin-top:3px;font:400 15px/1.6 ui-monospace,Menlo,monospace;
  letter-spacing:.14em;color:var(--gold)}

/* 先免费试玩：审核员与新访客都可能直接落在这一页，这里必须有一条通向服务本身的路 */
.try-free{display:inline-block;padding:15px 30px;border:1px solid rgba(216,180,106,.5);
  border-radius:10px;color:var(--gold);text-decoration:none;font-size:14px;letter-spacing:.12em}
.try-free:hover{background:rgba(216,180,106,.1)}

/* 售后与客诉说明 */
.aftersale{padding:34px 0 0;border-top:1px solid var(--line);margin-top:30px}
.aftersale-list{list-style:none;margin:0 0 14px;padding:0}
.aftersale-list li{position:relative;padding-left:20px;margin:9px 0;font-size:12.5px;
  line-height:1.95;color:var(--muted)}
.aftersale-list li::before{content:"·";position:absolute;left:6px;color:var(--gold)}
.aftersale-contact{margin:0;font-size:12.5px;line-height:1.95;color:var(--ink)}
.aftersale-contact a{color:var(--gold)}