/* ============================================================
   PRICING PAGE
   依賴 tokens.css + base.css + components.css + home.css
   ============================================================ */

.pricing-hero { padding: var(--ds-space-24) 0 var(--ds-space-12); text-align: center; }
.pricing-eyebrow { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-accent-bright); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--ds-space-4); }
.pricing-title { font-family: var(--ds-font-display); font-size: var(--ds-text-4xl); font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); margin-bottom: var(--ds-space-4); }
.pricing-sub { font-size: var(--ds-text-base); color: var(--ds-text-secondary); max-width: 480px; margin: 0 auto; line-height: var(--ds-leading-relaxed); }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ds-space-6); margin-bottom: var(--ds-space-16); }
.plan { background: var(--ds-bg-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-2xl); padding: var(--ds-space-8); position: relative; transition: border-color var(--ds-transition-base), box-shadow var(--ds-transition-base), transform var(--ds-transition-base); }
.plan:hover { border-color: var(--ds-accent-dim); box-shadow: 0 0 24px rgba(102,252,241,0.08); transform: translateY(-2px); }
.plan--featured { border-color: var(--ds-accent); background: var(--ds-gradient-card); }
.plan--featured:hover { border-color: var(--ds-accent-bright); box-shadow: 0 0 32px rgba(102,252,241,0.15); }
.plan__badge { position: absolute; top: calc(-1 * var(--ds-space-3)); left: var(--ds-space-6); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); background: var(--ds-accent); color: var(--ds-bg-primary); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-full); letter-spacing: 0.08em; font-weight: var(--ds-weight-semibold); }
.plan__name { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--ds-space-4); }
.plan__price { font-family: var(--ds-font-display); font-size: var(--ds-text-4xl); font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); line-height: 1; margin-bottom: var(--ds-space-2); }
.plan__price sup { font-size: var(--ds-text-lg); vertical-align: super; }
.plan__price sub { font-size: var(--ds-text-base); font-weight: var(--ds-weight-normal); color: var(--ds-text-muted); }
.plan__note { font-size: var(--ds-text-xs); color: var(--ds-text-muted); font-family: var(--ds-font-mono); min-height: 1.4em; }
.plan__divider { border: none; border-top: 1px solid var(--ds-border); margin: var(--ds-space-6) 0; }
.plan__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ds-space-3); }
.plan__features li { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); display: flex; align-items: flex-start; gap: var(--ds-space-3); line-height: var(--ds-leading-relaxed); }
.plan__features li::before { content: '—'; font-family: var(--ds-font-mono); color: var(--ds-accent); flex-shrink: 0; }
.plan--muted { opacity: 0.7; }
.plan__cta { display: block; width: 100%; margin-top: var(--ds-space-6); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-lg); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer; transition: all var(--ds-transition-fast); text-align: center; background: transparent; color: var(--ds-accent); border: 1px solid var(--ds-accent-dim); text-decoration: none; }
.plan__cta:hover { border-color: var(--ds-accent); color: var(--ds-accent-bright); background: rgba(102,252,241,0.05); }

.pricing-notes { border-top: 1px solid var(--ds-border); padding-top: var(--ds-space-8); display: flex; flex-direction: column; gap: var(--ds-space-3); margin-bottom: var(--ds-space-20); }
.pricing-notes p { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-text-muted); line-height: var(--ds-leading-relaxed); margin: 0; }
.pricing-notes a { color: var(--ds-text-secondary); text-decoration: underline; }
.pricing-notes a:hover { color: var(--ds-accent-bright); }