/* 开通会员区块：详情页（style.css）与引导页（landing.css）共用，只用两边都有的变量 */
.buy { margin: 28px 0 0; padding: 26px 20px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.buy h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: .12em; text-align: center; color: var(--text-main); }
.buy-lead { margin: 0 0 20px; font-size: 14px; text-align: center; color: var(--secondary); }
.buy-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.buy-card { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.buy-main { border-color: var(--seal, var(--primary)); box-shadow: 0 0 0 1px var(--seal, var(--primary)) inset; }
.buy-flag { position: absolute; top: -1px; right: 14px; padding: 2px 10px; font-size: 12px; letter-spacing: .1em; color: #FFF8F0; background: var(--seal, var(--primary)); border-radius: 0 0 4px 4px; }
.buy-name { font-size: 15px; letter-spacing: .1em; color: var(--text-main); }
.buy-price { margin: 4px 0 12px; font-size: 34px; font-weight: 700; line-height: 1.2; color: var(--seal, var(--primary)); }
.buy-price span { margin-right: 2px; font-size: 16px; font-weight: 500; }
.buy-card ul { flex: 1; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; color: var(--text-body); }
.buy-card li { position: relative; margin-bottom: 6px; padding-left: 16px; line-height: 1.7; }
.buy-card li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; background: var(--primary); transform: rotate(45deg); }
.buy-card .btn { width: 100%; }
.buy-note { margin: 16px 0 0; font-size: 12px; text-align: center; color: var(--secondary); }
@media (min-width: 640px) {
    .buy-grid { grid-template-columns: 1fr 1fr; }
    .buy-grid.buy-one { grid-template-columns: minmax(0, 360px); justify-content: center; }
}

/* 详情页最底部的低调一行 */
.buy-quiet { margin: 28px 0 8px; font-size: 12px; text-align: center; color: var(--secondary); opacity: .8; }
.buy-quiet a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.buy-quiet a + a { margin-left: 2px; }
.buy-quiet a:hover { color: var(--primary); }