/* CHG-0078: Ai1 pricing "Your starting cost" panel and plan finder dialog.
   Loaded only by pages/services/ai1-pricing.html. Breakpoints: 1024 / 768 / 480. */
.cost-panel { margin-top: 1.2rem; padding: 1.5rem; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); background: #fff; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem 2rem; scroll-margin-top: calc(var(--nav-h, 80px) + 70px); }
.cost-panel h2 { font-size: 1.8rem; line-height: 1.25; margin: 0 0 0.4rem; color: var(--dark); }
.cost-panel h2:focus { outline: none; }
.cost-panel h2:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.cost-sub { color: var(--grey-300); line-height: 1.6; margin: 0 0 1rem; }
.cost-view { display: flex; width: 100%; margin-bottom: 1rem; }
.cost-view button { flex: 1 1 0; min-height: 48px; }
.cost-field { margin-bottom: 0.8rem; }
.cost-field label, .cost-fl { display: block; font-weight: 700; font-size: 0.85rem; color: var(--dark); margin-bottom: 0.3rem; }
.cost-field select { width: 100%; min-height: 48px; padding: 0 0.75rem; border: 1px solid var(--grey-200); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; }
.cost-field select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cost-fixed { margin: 0 0 0.8rem; color: var(--dark); }
.cost-specs { margin-top: 0.4rem; color: var(--grey-300); }
.cost-specs summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--primary); }
.cost-specs p { margin: 0.3rem 0 0; line-height: 1.6; }
.cost-sum { margin: 0; display: grid; gap: 0; }
.cost-sum > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--grey-200); }
.cost-sum dt { font-weight: 700; color: var(--dark); }
.cost-sum dd { margin: 0; color: var(--grey-300); line-height: 1.6; }
.cost-sum output { color: var(--dark); font-weight: 600; }
.cost-note:empty { display: none; }
.cost-note, .cost-error { margin: 0.6rem 0 0; color: var(--dark); font-weight: 600; }
.cost-foot { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--grey-300); line-height: 1.6; }
.cost-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 1.5rem; margin: 1rem 0 0; }
.cost-links .btn { min-height: 48px; }
.cost-panel [hidden] { display: none !important; }
.pf-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Plan finder dialog */
.pf-modal .quiz-close { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; top: 0.4rem; right: 0.4rem; }
.pf-modal .quiz-close:focus-visible, .pf-modal .pf-check:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-modal .pf-qtext:focus, .pf-modal .pf-result h3:focus { outline: none; }
.pf-modal .pf-ractions .btn + .btn { margin-left: 0; }
@media (max-width: 1024px) {
  .cost-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cost-panel { padding: 1.2rem 1rem; }
  .cost-panel h2 { font-size: 1.5rem; }
  .cost-sum > div { grid-template-columns: minmax(0, 1fr); }
  .cost-links .btn { width: 100%; justify-content: center; }
  .quiz-overlay .pf-modal { width: calc(100vw - 16px); max-width: none; max-height: calc(100vh - 16px); overflow-y: auto; }
}