/* Pricing: quiet surfaces, aligned plans, and a readable feature comparison. */
.pricing-page { padding-bottom: var(--section-y); }
.pricing-hero { padding-block: var(--space-18) var(--space-14); text-align: center; }
.pricing-hero .eyebrow { justify-content: center; }
.pricing-hero h1 { font-size: var(--text-display); letter-spacing: -.055em; margin-bottom: var(--space-6); }
.pricing-hero h1 span { color: var(--ink-faint); }
.pricing-hero > p { max-width: 48ch; margin: 0 auto var(--space-5); color: var(--ink-soft); font-size: var(--text-lg); }
.pricing-compare-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--ink); }
.pricing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.pricing-toolbar > p { margin: 0; color: var(--ink-soft); font-size: var(--text-base); }
.billing-toggle { display: inline-flex; padding: var(--space-1); gap: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-sunken); }
.billing-option { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); min-height: 40px; border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; color: var(--ink-faint); font: inherit; font-size: var(--text-base); font-weight: var(--weight-semi); cursor: pointer; }
.billing-option:hover { color: var(--ink); }
.billing-option.is-active { background: var(--bg-elevated); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.billing-save { color: var(--gold-ink); font-size: var(--text-xs); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--line); gap: 1px; }
.plan { display: flex; flex-direction: column; min-width: 0; padding: var(--space-5); background: var(--bg); position: relative; }
.plan-featured { background: var(--bg-raised); box-shadow: inset 0 2px 0 var(--gold); }
.plan-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; margin-bottom: var(--space-7); }
.plan-heading h2 { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semi); letter-spacing: -.01em; }
.plan-badge { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2); font-size: var(--text-2xs); color: var(--gold-ink); white-space: nowrap; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.plan-amount { font-family: var(--font-body); font-weight: var(--weight-semi); font-size: var(--text-5xl); letter-spacing: -.055em; line-height: var(--leading-tight); font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-per, .plan-billing { font-size: var(--text-sm); color: var(--ink-faint); }
.plan-billing { margin: var(--space-2) 0 var(--space-6); }
.plan-cta { width: 100%; justify-content: space-between; font-size: var(--text-base); padding-inline: var(--space-4); }
.plan-details { border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: var(--space-6); flex: 1; }
.plan-includes { margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--ink); }
.plan-specs { margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); }
.plan-specs > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-base); }
.plan-specs dt { color: var(--ink-soft); }
.plan-specs dd { margin: 0; color: var(--ink); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; }
.plan-features { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.plan-features li { display: flex; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-soft); }
.plan-features li > span { color: var(--ink-faint); flex-shrink: 0; }
.plan-stake { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.plan-stake p { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--ink-faint); }
.plan-stake-cta { width: 100%; justify-content: space-between; padding: var(--space-2) 0; color: var(--ink-soft); font-size: var(--text-sm); }
.plan-stake-cta:hover { color: var(--gold-ink); }
.pricing-note { margin: var(--space-5) 0 0; font-size: var(--text-xs); color: var(--ink-faint); }
.pricing-empty { padding: var(--space-6); margin: 0; background: var(--bg); }
.pricing-addons { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); padding: var(--space-8); margin-top: var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pricing-addons h2 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semi); margin-bottom: var(--space-2); }
.pricing-addons p { font-size: var(--text-base); color: var(--ink-faint); margin: 0; }
.pricing-addon { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.pricing-addon > span { font-size: var(--text-sm); color: var(--ink-soft); }
.pricing-addon strong { font-size: var(--text-xl); font-weight: var(--weight-semi); }
.pricing-addon strong span { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--ink-faint); }
.pricing-comparison, .pricing-faq { padding-top: var(--space-18); scroll-margin-top: 100px; }
.pricing-section-heading { margin-bottom: var(--space-8); }
.pricing-section-heading h2 { font-size: var(--text-h2); letter-spacing: -.04em; margin-bottom: var(--space-3); }
.pricing-section-heading p { color: var(--ink-faint); margin: 0; }
.comparison-scroll-hint { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: var(--space-3); }
.pricing-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.pricing-table { min-width: 850px; margin: 0; }
.pricing-table caption { text-align: left; padding: var(--space-4) var(--space-5); color: var(--ink-faint); font-size: var(--text-sm); border-bottom: 1px solid var(--line); }
.pricing-table th, .pricing-table td { padding: var(--space-5); font-size: var(--text-base); }
.pricing-table thead th { background: var(--bg-raised); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--text-base); }
.pricing-table thead .comparison-featured { color: var(--gold-ink); }
.pricing-table tbody th { font-weight: var(--weight-medium); color: var(--ink-soft); }
.pricing-table th:first-child { min-width: 220px; }
.pricing-table td, .pricing-table thead th:not(:first-child) { text-align: center; min-width: 120px; }
.pricing-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.comparison-unavailable { color: var(--ink-faint); }
.pricing-faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-14); }
.pricing-faq-list { border-top: 1px solid var(--line); }
.pricing-faq details { border-bottom: 1px solid var(--line); }
.pricing-faq summary { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-6); list-style: none; cursor: pointer; font-size: var(--text-md); font-weight: var(--weight-semi); }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::after { content: '+'; color: var(--ink-faint); }
.pricing-faq details[open] summary::after { content: '−'; }
.pricing-faq details p { margin: 0; padding-bottom: var(--space-6); color: var(--ink-soft); font-size: var(--text-base); line-height: var(--leading-normal); }
@media (max-width: 1100px) and (min-width: 641px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pricing-addons { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-6); }
  .pricing-addons > div:first-child { grid-column: 1 / -1; }
  .pricing-faq { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .pricing-hero { padding-block: var(--space-12) var(--space-10); }
  .pricing-toolbar { flex-direction: column; align-items: flex-start; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-heading { margin-bottom: var(--space-5); }
  .pricing-comparison, .pricing-faq { padding-top: var(--space-12); }
  .pricing-addons { grid-template-columns: 1fr; }
}

.comparison-feature-note { display: block; max-width: 32ch; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--ink-faint); line-height: var(--leading-snug); }
.comparison-included, .comparison-unavailable { display: inline-block; font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: var(--leading-none); }
.comparison-included { color: var(--gold-ink); }