html {
  color-scheme: dark;
  /* Firefox — neutral dark thumb / track (same family as page bg #1b2023) */
  scrollbar-color: #3a4448 #1b2023;
}

/* Chromium / Safari / Edge — explicit dark scrollbars (avoids system accent / old “blue” defaults) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #1b2023;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #3a4448;
  border-radius: 999px;
  border: 2px solid #1b2023;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: #4d565a;
}

/* Narrow screens only: thinner bar, same neutral palette (no accent blue) */
@media (max-width: 768px) {
  html,
  body {
    scrollbar-width: thin;
    scrollbar-color: #3a4448 transparent;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background-color: #3a4448;
    border: 0;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover {
    background-color: #4d565a;
  }
}

:root {
  --color-primary-bg: rgba(27, 32, 35, 0.85);
  --color-accent: #a6cde7;
  /* Must match the rgb() of --color-accent / --color-primary-bg (for legacy rgba(var(--*), α) in index.html) */
  --color-accent-rgb: 166, 205, 231;
  --color-primary-bg-rgb: 27, 32, 35;
  /* Narrow viewports: minimum readable size for sales-page copy (see page-mobile-min-type.css) */
  --bw-mobile-min-font: 18px;
  --bw-mobile-min-font-secondary: 16px;
  /* iPad / tablet: cap content width so sections do not feel edge-to-edge (see page-mobile-min-type.css) */
  --bw-tablet-content-max: 48rem;
  --bw-tablet-content-max-lg: 56rem;
  --bw-tablet-pricing-max: 42rem;
  --bw-tablet-padding-x: 2.25rem;
}