/* Probee design tokens. Adjust these after comparing with the supplied logo. */
:root {
  --probee-navy: #17263A;
  --probee-yellow: #F7D95C;
  --probee-yellow-soft: #FFF8D8;
  --probee-blue-soft: #EEF7FA;
  --probee-gray-soft: #F5F6F7;
  --probee-white: #FFFFFF;
  --probee-text: var(--probee-navy);
  --probee-content-width: 1200px;
  --probee-radius: 12px;
  --probee-motion: 180ms ease;
}

/* Low-impact foundations; detailed component styling is opt-in via these classes. */
html { scroll-behavior: smooth; }
body { color: var(--probee-text); }
::selection { color: var(--probee-navy); background: var(--probee-yellow); }

.probee-container {
  width: min(calc(100% - 48px), var(--probee-content-width));
  margin-inline: auto;
}

/* Add these classes to the corresponding Zion Builder elements when building pages. */
.probee-hero {
  min-height: 33vh;
  min-height: 33svh;
  display: flex;
  align-items: center;
  background: var(--probee-gray-soft);
  color: var(--probee-navy);
}

.probee-section--gray { background: var(--probee-gray-soft); }
.probee-section--blue { background: var(--probee-blue-soft); }
.probee-section--yellow { background: var(--probee-yellow-soft); }

.probee-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgb(23 38 58 / 18%);
  border-radius: var(--probee-radius);
  background: transparent;
  color: var(--probee-navy);
  text-decoration: none;
  transition: background-color var(--probee-motion), border-color var(--probee-motion), transform var(--probee-motion);
}
.probee-button:hover,
.probee-button:focus-visible {
  border-color: var(--probee-navy);
  background: var(--probee-yellow-soft);
  color: var(--probee-navy);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .probee-container { width: min(calc(100% - 32px), var(--probee-content-width)); }
  .probee-hero { min-height: 33svh; padding-block: 40px; }
  .probee-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}