/* ── Pricing ── */
.pricing-section { background: var(--color-canvas); }
.pricing-toggle {
  display: flex; justify-content: center; margin-bottom: 2.5rem;
  border: var(--border); border-radius: var(--radius);
  overflow: hidden; width: fit-content; margin-inline: auto;
}
.toggle-btn {
  padding: 0.625rem 1.5rem; font-size: 0.9375rem; font-weight: 600;
  font-family: var(--font-heading); color: var(--color-body);
  background: var(--color-surface); transition: all 0.2s;
}
.toggle-btn.active { background: var(--color-accent); color: #FFF; }
.toggle-badge {
  font-size: 0.6875rem; background: var(--color-accent-subtle);
  color: var(--color-accent); padding: 0.125rem 0.5rem;
  border-radius: 999px; margin-right: 0.375rem; font-weight: 600;
}
.toggle-btn.active .toggle-badge { background: rgba(255,255,255,0.25); color: #FFF; }
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.plan-card {
  background: var(--color-surface); border: var(--border);
  border-radius: var(--radius); padding: 2rem 1.5rem;
  text-align: center; position: relative;
}
.plan-popular { border-color: var(--color-accent); border-width: 2px; }
.plan-badge {
  position: absolute; top: -0.75rem; right: 50%; transform: translateX(50%);
  background: var(--color-accent); color: #FFF; padding: 0.25rem 1rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  font-family: var(--font-heading); white-space: nowrap;
}
.plan-name { font-size: 1.25rem; margin-bottom: 0.75rem; }
.plan-price { margin-bottom: 1.5rem; }
.price-amount { font-size: 2.5rem; font-weight: 700; color: var(--color-ink); font-family: var(--font-heading); }
.price-currency, .price-period { font-size: 0.875rem; color: var(--color-body); }
.plan-features { margin-bottom: 1.5rem; text-align: right; }
.plan-features li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0; font-size: 0.9375rem;
}
.plan-features .excluded { opacity: 0.5; }
.plan-cta { width: 100%; }
.pricing-note {
  text-align: center; margin-top: 2rem;
  font-size: 0.875rem; color: var(--color-body);
}

@media (min-width: 600px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .pricing-grid { grid-template-columns: repeat(4,1fr); } }

/* ── Testimonials ── */
.testimonials-section { background: var(--color-surface); }
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.testimonial-card {
  background: var(--color-canvas); border: var(--border);
  border-radius: var(--radius); padding: 2rem 1.5rem;
}
.testimonial-quote {
  font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem;
  color: var(--color-ink); font-style: normal;
}
.testimonial-author { display: flex; flex-direction: column; gap: 0.125rem; }
.testimonial-name { font-weight: 600; color: var(--color-ink); font-style: normal; }
.testimonial-role { font-size: 0.8125rem; color: var(--color-body); }

@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3,1fr); } }

/* ── FAQ ── */
.faq-section { background: var(--color-canvas); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border: var(--border); border-radius: var(--radius); margin-bottom: 0.75rem; background: var(--color-surface); }
.faq-question {
  padding: 1.25rem 1.5rem; cursor: pointer; font-weight: 600;
  font-family: var(--font-heading); font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center;
  list-style: none; color: var(--color-ink);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-chevron { transition: transform 0.2s; flex-shrink: 0; margin-right: 0.75rem; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 1.5rem 1.25rem; font-size: 0.9375rem; color: var(--color-body); }

/* ── CTA ── */
.cta-section { background: var(--color-canvas); }
.cta-block {
  background: var(--color-accent); border-radius: var(--radius);
  text-align: center; padding: 4rem 2rem;
}
.cta-block h2 { color: #FFF; font-size: 1.75rem; margin-bottom: 1.5rem; }
.cta-btn {
  background: #FFF; color: var(--color-accent); border: 1px solid #FFF;
  font-weight: 700;
}
.cta-btn:hover { background: var(--color-accent-subtle); color: var(--color-accent-hover); }
.cta-note { color: rgba(255,255,255,0.8); font-size: 0.875rem; margin-top: 1rem; }

@media (min-width: 768px) { .cta-block h2 { font-size: 2.25rem; } }

/* ── Footer ── */
.site-footer {
  background: var(--color-ink); color: var(--color-muted);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  margin-bottom: 2rem;
}
.footer-tagline { font-size: 0.875rem; margin-top: 0.5rem; }
.footer-links h4, .footer-contact h4 {
  color: #FFF; font-size: 0.9375rem; margin-bottom: 0.75rem;
  font-family: var(--font-heading);
}
.footer-links ul, .footer-contact ul { display: flex; flex-direction: column; gap: 0.375rem; }
.site-footer a { color: var(--color-muted); font-size: 0.875rem; }
.site-footer a:hover { color: #FFF; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem; font-size: 0.8125rem; text-align: center;
}

@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
