/* GROWBZ — Professional landing (+ /professional/for/{slug} persona variants).
   Page-level CSS from the design's <helmet> (range slider styling), plus layout
   adaptations below tablet width via data-* hooks (no effect at >= 1024px). */

input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid #10B981; box-shadow: 0 3px 8px rgba(16,185,129,0.4); cursor: pointer; margin-top: -9px; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #10B981; cursor: pointer; }

@media (max-width: 960px) {
  [data-hero-grid] { grid-template-columns: 1fr !important; }
  [data-roi-grid] { grid-template-columns: 1fr !important; }
  [data-persona-grid] { grid-template-columns: repeat(3, 1fr) !important; }
  [data-risk-grid] { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  [data-pro-section], [data-app-header] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-pro-h1] { font-size: 32px !important; }
  [data-compare-grid] { grid-template-columns: 1fr !important; row-gap: 24px !important; }
  [data-persona-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-risk-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-roi-grid] { padding: 32px 22px !important; }
  [data-roi-panel] { padding: 32px 24px !important; }
  [data-final-cta] { padding: 40px 24px !important; }
  [data-final-h2] { font-size: 30px !important; }
}