/* 会员方案使用首页同源山水与双主题，权益信息完整保留。 */
.pricing-page { --plan-accent: #1762bb; --plan-ink: #102c50; --plan-art: url('/static/img/homepage-b-landscape.png'); position: relative; isolation: isolate; width: 100%; margin: 0 auto; color: var(--plan-ink); overflow-wrap: anywhere; }
:root[data-theme="warm"] .pricing-page { --plan-accent: #cf5145; --plan-ink: #282321; --plan-art: url('/static/img/homepage-a-landscape.png'); }
.pricing-page::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--plan-art) center / cover no-repeat; opacity: .13; content: ''; }
main:has(> .pricing-page) { margin-block: 16px; }
.pricing-header { margin: 0 0 14px; }
.pricing-header h1 { margin: 0; color: var(--plan-ink); font-family: var(--font-family-display); font-size: clamp(27px, 2.4vw, 36px); font-weight: 600; line-height: 1.3; }
.pricing-common-rules { margin-top: 24px; }
.pricing-common-rules > p { margin: 0; color: #53687d; font-size: 14px; line-height: 1.6; }
.pricing-intro { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.pricing-intro span { color: #526b82; font-size: 14px; line-height: 1.5; }
.pricing-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.pricing-section-heading h2 { margin: 0; color: var(--plan-ink); font-family: var(--font-family-display); font-size: 25px; font-weight: 500; }
.pricing-section-heading > span { color: #53687d; font-size: 14px; line-height: 1.7; }
.pricing-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; column-gap: 16px; row-gap: 0; margin: 0; }
.pricing-card { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 7; min-width: 0; padding: 18px 22px; border: 1px solid #e2e9ef; border-radius: 13px; background: linear-gradient(180deg, #f7fafd 0, #fff 210px); }
.pricing-card.featured { border-color: color-mix(in srgb, var(--plan-accent) 45%, white); background: linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 10%, white), white 240px); box-shadow: 0 14px 34px rgba(29, 59, 92, .09); }
.pricing-card.featured::before { position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 4px 4px; background: var(--plan-accent); content: ''; }
.plan-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.plan-ribbon { max-width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: 20px; background: color-mix(in srgb, var(--plan-accent) 9%, white); color: var(--plan-accent); font-size: 14px; font-weight: 600; line-height: 1.5; }
.plan-kicker { display: flex; align-items: center; gap: 10px; color: #6a7e91; font-size: 14px; }
.plan-kicker > span { color: color-mix(in srgb, var(--plan-accent) 55%, white); font: 21px Georgia, serif; }
.plan-name { margin: 0 0 4px; color: var(--plan-ink); font-family: var(--font-family-display); font-size: 26px; font-weight: 600; }
.plan-price { margin: 0 0 1px; color: var(--plan-accent); font-family: var(--font-family-base); font-size: clamp(30px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.04em; line-height: 1.35; }
.plan-description { margin: 0 0 10px; color: #718397; font-size: 14px; line-height: 1.55; }
.plan-quota { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 7px; background: #fff; border: 1px solid #e4ecf3; }
.plan-quota strong { color: var(--plan-ink); font: 28px Georgia, serif; }
.plan-quota span { color: #53687d; font-size: 14px; line-height: 1.6; }
.featured .plan-quota { border-color: color-mix(in srgb, var(--plan-accent) 20%, white); }
.plan-price span, .plan-price small { color: #728496; font-size: 14px; font-weight: 400; letter-spacing: normal; margin-left: 8px; }
.plan-features { margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid #e7edf2; list-style: none; }
.plan-features li { position: relative; margin-bottom: 6px; padding-left: 18px; color: #40576d; font-size: 14px; line-height: 1.5; }
.plan-features li:last-child { margin-bottom: 0; }
.plan-features li::before { position: absolute; left: 1px; top: 9px; width: 5px; height: 8px; border-right: 1px solid var(--plan-accent); border-bottom: 1px solid var(--plan-accent); transform: rotate(40deg); content: ''; }
.plan-features li.disabled { color: #929daa; }
.plan-features li.disabled::before { top: 10px; width: 7px; height: 1px; border: 0; background: #a9b4bf; transform: none; }
.plan-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--plan-ink); border-radius: 6px; background: var(--plan-ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.6; text-align: center; text-decoration: none; }
.plan-btn.outline { border-color: #cbd9e6; background: #f8fbff; color: var(--plan-accent); }
.plan-btn:hover:not([aria-disabled="true"]) { border-color: var(--plan-accent); background: var(--plan-accent); color: white; }
.plan-btn:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 4px; }
.plan-btn[aria-disabled="true"] { cursor: default; }
.pricing-note { display: flex; align-items: center; gap: 18px; margin-top: 14px; padding: 14px 20px; border: 1px solid #e1e8ee; border-radius: 12px; background: #ffffff90; }
.pricing-note-mark { display: grid; flex: 0 0 50px; height: 50px; place-items: center; border: 1px solid color-mix(in srgb, var(--plan-accent) 25%, white); border-radius: 50%; color: var(--plan-accent); font: 24px var(--font-family-display); }
.pricing-note h2 { margin: 0 0 7px; color: var(--plan-ink); font-family: var(--font-family-display); font-size: 19px; font-weight: 500; }
.pricing-note p { margin: 0; color: #758698; font-size: 14px; line-height: 1.6; }
.pricing-note > a { display: flex; flex: 0 0 auto; align-items: center; gap: 20px; margin-left: auto; color: var(--plan-accent); font-size: 14px; text-decoration: none; }
@media (max-width: 1100px) {
    .pricing-container { column-gap: 14px; }
    .pricing-card { padding: 18px 16px; }
    .plan-name { font-size: 23px; }
    .plan-price { font-size: 30px; }
}
@media (max-width: 780px) {
    .pricing-container { grid-template-columns: 1fr; gap: 20px; }
    .pricing-card { display: flex; flex-direction: column; grid-row: auto; padding: 22px; }
    .plan-features li { break-inside: avoid; }
    .pricing-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .pricing-section-heading h2 { font-size: 22px; }
    .pricing-note { align-items: flex-start; flex-wrap: wrap; gap: 16px; padding: 22px; }
    .pricing-note > div { flex: 1; min-width: 0; }
    .pricing-note > a { width: 100%; margin-left: 0; padding-top: 10px; }
}
@media (max-width: 480px) {
    .pricing-header { margin-bottom: 16px; }
    .pricing-card { padding: 18px; }
    .pricing-note-mark { display: none; }
}

/* 使用原生 details 保留键盘操作，视觉与首页 FAQ 保持一致。 */
.pricing-faq { margin-top: 42px; padding: 28px 32px; border-radius: 16px; background: #ffffffed; }
.pricing-faq h2 { margin: 0 0 20px; color: var(--plan-ink); font: 26px/1.5 var(--font-family-display); }
.pricing-faq-list { width: 100%; margin: 0; }
.pricing-faq-list details { border-bottom: 1px solid color-mix(in srgb, var(--plan-ink) 13%, transparent); }
.pricing-faq-list details:first-child { border-top: 1px solid color-mix(in srgb, var(--plan-ink) 13%, transparent); }
.pricing-faq-list summary { padding: 24px 0; color: var(--plan-ink); font-size: clamp(18px, 1.3vw, 21px); font-weight: 600; line-height: 1.7; cursor: pointer; }
.pricing-faq-list summary::marker { color: var(--plan-accent); }
.pricing-faq-list summary:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 4px; border-radius: 3px; }
.pricing-faq-list details[open] summary { padding-bottom: 14px; color: var(--plan-accent); }
.pricing-faq-list p { max-width: 80ch; margin: 0; padding: 0 0 28px; color: #40576d; font-size: 16px; line-height: 1.9; }
:root[data-theme="warm"] .pricing-page { --plan-muted: #62564e; }
:root[data-theme="warm"] .plan-features li,
:root[data-theme="warm"] .pricing-faq-list p,
:root[data-theme="warm"] .plan-description,
:root[data-theme="warm"] .plan-quota span { color: var(--plan-muted); }
@media (max-width: 780px) {
    .pricing-faq { margin-top: 28px; padding: 22px; }
    .pricing-faq-list summary { padding-block: 20px; }
}