.pricing-page { color: #334657; }
.pricing-page .pricing-hero { padding: 190px 0 58px; }
.pricing-page .pricing-hero h1 { font-size: clamp(30px, 4vw, 44px); }
.pricing-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #187bb0; margin-bottom: 12px; }
.pricing-hero .pricing-eyebrow, .pricing-hero .pricing-intro { color: #fff; }
.pricing-intro { margin: 18px auto 24px; max-width: 540px; }
.pricing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pricing-page #Payments, .pricing-page #Prices { scroll-margin-top: 90px; }
.pricing-page .payment-section { padding: 48px 0; background: #f2f7fa; }
.payment-card { max-width: 800px; margin: auto; padding: 36px; background: #fff; border: 1px solid #dce7ee; border-radius: 16px; box-shadow: 0 12px 32px #16384d0a; }
.payment-heading { text-align: center; max-width: 600px; margin: 0 auto 24px; }
.payment-heading h2 { font-size: 30px; color: #203b50; }
.payment-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.payment-option { font: inherit; font-weight: 600; color: #25465c; background: #f3f7fa; padding: 12px 16px; border: 1px solid #c9dbe7; border-radius: 8px; cursor: pointer; text-align: center; }
.payment-option:hover, .payment-option[aria-pressed="true"] { background: #167bad; border-color: #167bad; color: white; }
.payment-option:focus-visible, .service-detail summary:focus-visible { outline: 3px solid #167bad; outline-offset: 4px; }
.paypal-button-container { width: 100%; max-width: 480px; margin: auto; }
.payment-help { max-width: 480px; margin: 20px auto 0; font-size: 14px; }
#cash-payment { text-align: center; padding: 15px 0; }
[hidden] { display: none !important; }
.pricing-page .service-prices { padding: 52px 0; }
.service-prices h2 { color: #203b50; font-size: 28px; }
.GeneratedTable { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0; border: 1px solid #d7e2e9; border-radius: 10px; overflow: hidden; color: #334657; }
.GeneratedTable th { background: #203b50; color: #fff; text-align: left; font-weight: 600; }
.GeneratedTable td, .GeneratedTable th { padding: 18px 22px; vertical-align: top; }
.GeneratedTable td { border-top: 1px solid #dce6ed; }
.GeneratedTable tbody tr:nth-child(even) { background: #f6f9fb; }
.GeneratedTable td:last-child { width: 34%; }
.service-detail summary { cursor: pointer; font-weight: 600; color: #176b9c; }
.service-description { margin-top: 12px; line-height: 1.65; font-size: 14px; color: #415769; }
@media (max-width: 767px) {
  .pricing-page .pricing-hero { padding: 120px 0 35px; }
  .pricing-page .payment-section, .pricing-page .service-prices { padding: 30px 0; }
  .payment-card { padding: 24px 16px; border-radius: 12px; }
  .payment-heading h2 { font-size: 26px; }
  .payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #pay-online { grid-column: 1 / -1; }
  .payment-option { padding: 12px 8px; }
  .GeneratedTable, .GeneratedTable tbody, .GeneratedTable tr, .GeneratedTable td { display: block; width: 100%; }
  .GeneratedTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .GeneratedTable tr { padding: 18px; border-top: 1px solid #dce6ed; }
  .GeneratedTable tr:first-child { border-top: 0; }
  .GeneratedTable td { border: 0; padding: 0; }
  .GeneratedTable td:last-child { width: 100%; margin-top: 12px; }
  .pricing-actions .butn { padding: 12px 16px; }
}

/* Separate payment providers; Square is the default. */
.payment-panel { text-align: center; padding: 12px 0; max-width: 540px; margin: auto; }
.payment-panel h3 { font-size: 23px; color: #203b50; }
.payment-option small { display: block; font-size: 11px; line-height: 1.3; }
.venmo-payment-qr { display: block; width: 280px; height: auto; max-width: 100%; margin: 16px auto; }
@media (max-width: 767px) {
  #pay-online { grid-column: auto; }
  #pay-square { grid-column: 1 / -1; }
}

/* Isolated pricing preview: no effect on the live page. */
.payment-options { align-items: stretch; }
.payment-option { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; line-height: 1.4; margin: 0; vertical-align: middle; }
.cash-contact-actions { display: flex; flex-direction: column; gap: 12px; max-width: 300px; margin: 24px auto 0; }
.cash-contact-actions .butn { width: 100%; }
.pricing-hero .preview-notice { color: #fff; font-size: 13px; }
.section-heading { max-width: 720px; margin-bottom: 28px; }
.rate-grid,.monthly-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 24px 0; }
.rate-card,.monthly-card,.camera-card { padding: 28px; border: 1px solid #d7e2e9; border-radius: 12px; background: #fff; }
.rate-card { background: #f2f7fa; }
.rate-card h3,.monthly-card h3,.camera-card h3 { font-size: 22px; color: #203b50; }
.plan-price { color: #176b9c; font-size: 32px; font-weight: 700; line-height: 1.3; margin: 18px 0; }
.plan-price span { color: #415769; font-size: 15px; font-weight: 400; display: inline-block; }
.pricing-note { color: #415769; font-size: 14px; margin: 22px 0 32px; line-height: 1.8; }
.pricing-note h3 { font-size: 22px; }
.camera-card { margin: 36px 0; border-left: 4px solid #167bad; }
.camera-card .pricing-note { margin-bottom: 0; }
.monthly-section { background: #f2f7fa; padding: 52px 0; }
#Monthly { scroll-margin-top: 90px; }
.gps-heading { margin-top: 40px; }
.tax-note { font-weight: 600; color: #176b9c; }
.estimate-table tbody th { background: transparent; color: #203b50; font-weight: 600; border-top: 1px solid #dce6ed; width: 52%; }
.estimate-table td,.estimate-table td:last-child { width: 24%; }
@media (max-width: 767px) {
  .rate-grid,.monthly-grid { grid-template-columns: 1fr; gap: 16px; }
  .rate-card,.monthly-card,.camera-card { padding: 22px; }
  .estimate-table tbody th { display: block; width: 100%; border: 0; padding: 0 0 10px; }
  .estimate-table td,.estimate-table td:last-child { width: 100%; margin: 4px 0 0; }
  .estimate-table td::before { content: attr(data-label) ': '; font-weight: 600; }
  #pay-square { grid-column: auto; }
  .payment-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .monthly-section { padding: 30px 0; }
}