/* Reuse the shared palette and card system for engagement pricing. */
.engagement-price {
  color: var(--vs-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 18px 0;
}
.engagement-price span {
  display: block;
  margin-top: 6px;
  font: 400 0.75rem/1.6 "DM Mono", monospace;
  letter-spacing: 0;
  color: var(--vs-muted);
}
.engagement-package { min-width: 0; align-content: start; }
.engagement-package h4 { margin: 22px 0 8px; font-size: 1rem; }
.engagement-package .service-list { margin-top: 0; }
.engagement-package .button { margin-top: 22px; }
.engagement-note { max-width: 1000px; margin-top: 24px; color: var(--vs-muted); font-size: 0.85rem; }
.engagement-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--vs-border); border-radius: 20px; }
.engagement-table { width: 100%; border-collapse: collapse; background: var(--vs-surface); text-align: left; }
.engagement-table caption { text-align: left; padding: 18px 22px; color: var(--vs-muted); font-size: 0.85rem; }
.engagement-table th, .engagement-table td { padding: 16px 22px; border-top: 1px solid var(--vs-border); overflow-wrap: anywhere; }
.engagement-table thead { background: var(--vs-surface-strong); }
.engagement-table tbody th { font-weight: 600; color: var(--vs-heading); }
.engagement-table td { color: var(--vs-copy); }
.assessment-comparison { min-width: 560px; table-layout: fixed; }
.engagement-faq details { border-bottom: 1px solid var(--vs-border); padding: 20px 0; }
.engagement-faq summary { color: var(--vs-heading); font-weight: 600; cursor: pointer; padding: 8px 4px; }
.engagement-faq details p { max-width: 78ch; padding: 0 4px; }
.engagement-faq summary:focus-visible, .engagement-table-wrap:focus-visible { outline: 2px solid var(--vs-heading); outline-offset: 4px; }
.engagement-package[id] { scroll-margin-top: 180px; }
[id="pricing"], [id="engagement-pricing"], [id="consultation"], [id="implementation"], [id="support"] { scroll-margin-top: 180px; }
@media (max-width: 760px) {
  .engagement-table th, .engagement-table td { padding: 14px 12px; font-size: 0.85rem; }
  [id="pricing"], [id="engagement-pricing"], [id="consultation"], [id="implementation"], [id="support"] { scroll-margin-top: 24px; }
}