/* Pricing page: cards + transparent credits FAQ. Site token system. */

:root {
  --bg: #0b0b0c;
  --surface: #121214;
  --surface-hover: #18181b;
  --border: #222226;
  --border-strong: #323238;
  --text: #f2f2f5;
  --text-secondary: #bcbcc6;
  --text-muted: #9a9aa4;
  --accent: #d46a58;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
}

.hero-compact { padding: 56px 0 28px; }
.hero-compact h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; margin: 10px 0 16px; letter-spacing: -0.01em; }

.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pricing-card { position: relative; display: flex; flex-direction: column; }
.pricing-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .02em;
}
.pricing-rate { color: var(--text-muted); font-family: var(--mono); font-size: .82rem; margin: 2px 0 10px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.pricing-features li { color: var(--text-secondary); font-size: .9rem; padding-left: 20px; position: relative; }
.pricing-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent); }
.pricing-card .btn-primary { margin-top: auto; }

.faq-list { display: grid; gap: 14px; margin-top: 28px; max-width: 720px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
.faq-item h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0 0 8px; }
.faq-item p { color: var(--text-secondary); line-height: 1.6; margin: 0; }