/* Bornbee Hosting - Design Psychology v4.0.0
   Final layer: a coherent visual/psychological system for creatives buying a complete online presence. */
:root {
  --bbp-carbon: #090d12;
  --bbp-carbon-2: #111720;
  --bbp-carbon-3: #18202b;
  --bbp-ink: #0f141b;
  --bbp-muted: #5d6571;
  --bbp-paper: #f6f3ea;
  --bbp-paper-2: #efeadf;
  --bbp-surface: #fffdf7;
  --bbp-line: rgba(15, 20, 27, 0.12);
  --bbp-line-strong: rgba(15, 20, 27, 0.22);
  --bbp-line-dark: rgba(255, 255, 255, 0.16);
  --bbp-lime: #c8ff3d;
  --bbp-lime-2: #d9ff6d;
  --bbp-lime-ink: #405800;
  --bbp-radius-sm: 10px;
  --bbp-radius-md: 16px;
  --bbp-radius-lg: 24px;
  --bbp-radius-xl: 34px;
}

html,
body,
.bh-main {
  background: var(--bbp-paper) !important;
  color: var(--bbp-muted) !important;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Design psychology: typography and contrast guardrails
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.bh-section__header h2,
.bb-ref-heading h2,
.bb-modern-flow__intro h2,
.bb-ref-copy-block h2,
.bh-content h2,
.bh-content h3,
.bh-page-hosting-hero h1,
.bh-features-hero h1,
.bh-contact-hero h1,
.bh-free-hero h1,
.bb-ref-hero h1 {
  color: var(--bbp-ink) !important;
  letter-spacing: -0.052em !important;
  text-wrap: balance;
}

p, li, td, .bh-content p,
.bb-ref-heading p,
.bh-section__header p,
.bb-modern-flow__intro p,
.bb-ref-copy-block p {
  color: var(--bbp-muted) !important;
}

.bh-section--dark h1,
.bh-section--dark h2,
.bh-section--dark h3,
.bh-section--dark h4,
.bh-page-hosting-hero h1,
.bh-features-hero h1,
.bh-contact-hero h1,
.bh-free-hero h1,
.bb-ref-hero h1,
.bb-ref-section--pricing h1,
.bb-ref-section--pricing h2,
.bb-ref-section--pricing h3,
.bb-ref-dark-panel h1,
.bb-ref-dark-panel h2,
.bb-ref-dark-panel h3,
.bb-ref-final-cta__inner h1,
.bb-ref-final-cta__inner h2,
.bb-ref-final-cta__inner h3,
.bh-cta-final__inner h1,
.bh-cta-final__inner h2,
.bh-cta-final__inner h3,
.bh-strategy-value__inner h1,
.bh-strategy-value__inner h2,
.bh-strategy-value__inner h3,
.bh-footer h2,
.bh-footer h3 {
  color: #fff !important;
}

.bh-section--dark p,
.bh-section--dark li,
.bh-page-hosting-hero p,
.bh-features-hero p,
.bh-contact-hero p,
.bh-free-hero p,
.bb-ref-hero p,
.bb-ref-section--pricing p,
.bb-ref-section--pricing li,
.bb-ref-dark-panel p,
.bb-ref-dark-panel li,
.bb-ref-final-cta__inner p,
.bh-cta-final__inner p,
.bh-strategy-value__inner p,
.bh-strategy-value__inner li,
.bh-footer p,
.bh-footer li,
.bh-footer a {
  color: rgba(255, 255, 255, 0.76) !important;
}

/* Lime is an action/detail color, not low-contrast paragraph text. */
.bb-ref-eyebrow,
.bh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bbp-ink) !important;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem !important;
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

.bb-ref-eyebrow::before,
.bh-kicker::before {
  content: "";
  display: inline-block;
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px;
  border-radius: 999px;
  background: var(--bbp-lime) !important;
  box-shadow: none !important;
}

.bh-section--dark .bb-ref-eyebrow,
.bh-section--dark .bh-kicker,
.bh-page-hosting-hero .bh-kicker,
.bh-features-hero .bh-kicker,
.bh-contact-hero .bh-kicker,
.bh-free-hero .bh-kicker,
.bb-ref-hero .bb-ref-eyebrow,
.bb-ref-section--pricing .bb-ref-eyebrow,
.bb-ref-dark-panel .bb-ref-eyebrow,
.bb-ref-final-cta__inner .bb-ref-eyebrow,
.bh-strategy-value__inner .bb-ref-eyebrow,
.bh-footer .bh-kicker {
  color: var(--bbp-lime) !important;
}

/* =========================================================
   Header: stable product navigation, admin-bar safe
   ========================================================= */
.bh-header {
  position: fixed;
  top: 0 !important;
  right: 0;
  left: 0;
  z-index: 999;
  background: rgba(246, 243, 234, 0.96) !important;
  border-bottom: 1px solid rgba(15, 20, 27, 0.11) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) saturate(140%);
}

body.admin-bar .bh-header { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar .bh-header { top: 46px !important; }
}

.bh-header__inner {
  height: 72px !important;
  gap: 22px;
}

.bh-header__brand {
  flex: 0 0 auto;
  text-decoration: none;
}

.bh-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: var(--bbp-ink) !important;
  font-family: var(--font-display, sans-serif);
  line-height: 1;
  white-space: nowrap;
}

.bh-logo__icon,
.bh-logo__divider,
.bh-logo__accent {
  display: none !important;
}

.bh-logo__text {
  color: var(--bbp-ink) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.05em !important;
}

.bh-nav { gap: 4px !important; }
.bh-nav > li > a,
.bh-nav__dropdown-trigger,
.bh-header__login {
  min-height: 40px !important;
  border-radius: 999px !important;
  color: rgba(15, 20, 27, 0.72) !important;
  font-size: 0.9rem !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em;
}

.bh-nav > li > a:hover,
.bh-nav__dropdown-trigger:hover,
.bh-nav__has-dropdown:focus-within .bh-nav__dropdown-trigger,
.bh-header__login:hover {
  background: rgba(15, 20, 27, 0.055) !important;
  color: var(--bbp-ink) !important;
}

.bh-header .bh-btn,
.bh-header__login {
  border-radius: 14px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
}

.bh-header__login {
  border: 1px solid rgba(15, 20, 27, 0.13) !important;
  background: transparent !important;
}

.bh-header .bh-btn--primary {
  background: var(--bbp-lime) !important;
  border-color: rgba(15, 20, 27, 0.24) !important;
  color: var(--bbp-ink) !important;
}

.bh-dropdown {
  border: 1px solid rgba(15, 20, 27, 0.12) !important;
  background: rgba(255, 253, 247, 0.98) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(15, 20, 27, 0.12) !important;
}

.bh-mobile-menu {
  top: 72px !important;
  background: var(--bbp-paper) !important;
}
body.admin-bar .bh-mobile-menu { top: 104px !important; }
@media (max-width: 782px) {
  body.admin-bar .bh-mobile-menu { top: 118px !important; }
}

/* =========================================================
   Buttons and controls: no cheap shine, crisp confidence
   ========================================================= */
.bh-btn,
.bb-ref-btn,
.bb-ref-domain__form button,
button[type="submit"],
input[type="submit"] {
  min-height: 46px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

.bh-btn:hover,
.bb-ref-btn:hover,
.bb-ref-domain__form button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

.bh-btn--primary,
.bb-ref-btn--primary,
.bb-ref-domain__form button,
button[type="submit"],
input[type="submit"] {
  background: var(--bbp-lime) !important;
  color: var(--bbp-ink) !important;
  border: 1px solid rgba(15, 20, 27, 0.24) !important;
}

.bh-btn--primary:hover,
.bb-ref-btn--primary:hover,
.bb-ref-domain__form button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--bbp-lime-2) !important;
}

.bh-btn--ghost,
.bb-ref-btn--ghost,
.bh-btn--secondary,
.bb-ref-btn--secondary {
  border: 1px solid var(--bbp-line) !important;
  background: transparent !important;
  color: var(--bbp-ink) !important;
}

.bb-ref-hero .bb-ref-btn--ghost,
.bh-section--dark .bh-btn--ghost,
.bb-ref-dark-panel .bb-ref-btn--ghost,
.bb-ref-final-cta__inner .bb-ref-btn--ghost,
.bh-cta-final__inner .bh-btn--ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* =========================================================
   Page sections: simple rhythm, fewer competing layers
   ========================================================= */
.bb-ref-hero,
.bh-page-hosting-hero,
.bh-features-hero,
.bh-contact-hero,
.bh-free-hero,
.bh-section--dark,
.bb-ref-section--pricing,
.bb-ref-dark-panel,
.bb-ref-final-cta__inner,
.bh-cta-final__inner,
.bh-strategy-value__inner {
  background-color: var(--bbp-carbon) !important;
  background-image:
    radial-gradient(circle at 84% 18%, rgba(200, 255, 61, 0.1), transparent 26%),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) !important;
  background-size: auto, 82px 82px, 82px 82px !important;
}

.bb-ref-hero {
  min-height: 760px !important;
  padding: calc(72px + 86px) 0 118px !important;
}

body.admin-bar .bb-ref-hero,
body.admin-bar .bh-page-hosting-hero,
body.admin-bar .bh-features-hero,
body.admin-bar .bh-contact-hero,
body.admin-bar .bh-free-hero {
  padding-top: calc(72px + 110px) !important;
}

.bh-page-hosting-hero,
.bh-features-hero,
.bh-contact-hero,
.bh-free-hero {
  padding: calc(72px + 80px) 0 90px !important;
  text-align: left !important;
}

.bb-ref-hero__grid {
  align-items: center !important;
  gap: clamp(42px, 7vw, 88px) !important;
}

.bb-ref-hero__copy { max-width: 780px !important; }
.bb-ref-hero h1 {
  max-width: 780px !important;
  font-size: clamp(3rem, 5.3vw, 5.65rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.068em !important;
}

.bh-page-hosting-hero h1,
.bh-features-hero h1,
.bh-contact-hero h1,
.bh-free-hero h1 {
  max-width: 930px !important;
  font-size: clamp(2.7rem, 5.2vw, 5.2rem) !important;
  line-height: 0.96 !important;
}

.bb-ref-hero p,
.bh-page-hosting-hero p,
.bh-features-hero p,
.bh-contact-hero p,
.bh-free-hero p {
  max-width: 720px !important;
  font-size: clamp(1rem, 1.35vw, 1.17rem) !important;
  line-height: 1.72 !important;
}

.bb-ref-hero__bg {
  opacity: 0.08 !important;
  mix-blend-mode: normal !important;
}

.bb-ref-hero__trust {
  color: rgba(255, 255, 255, 0.62) !important;
  font-weight: 650 !important;
}

.bb-polish-hero-visual {
  max-width: 470px !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

.bb-ref-hero__mini-card {
  border-radius: 16px !important;
  background: rgba(9, 13, 18, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

/* Domain + trust strip: quiet support, not a competing hero. */
.bb-ref-domain {
  margin-top: -44px !important;
  position: relative;
  z-index: 2;
}

.bb-ref-domain__box {
  background: var(--bbp-surface) !important;
  border: 1px solid rgba(15, 20, 27, 0.12) !important;
  border-radius: 26px !important;
  box-shadow: none !important;
}

.bb-ref-logos {
  background: var(--bbp-paper) !important;
  padding: 0 !important;
}

.bb-ref-logos ul {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
  border-top: 1px solid rgba(15,20,27,0.12) !important;
  border-bottom: 1px solid rgba(15,20,27,0.12) !important;
}

.bb-ref-logos li {
  padding: 18px 20px !important;
  border-right: 1px solid rgba(15,20,27,0.08);
  color: rgba(15,20,27,0.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 760;
}
.bb-ref-logos li:last-child { border-right: 0; }

.bh-section--light,
.bb-ref-section--light,
.bb-modern-flow,
.bh-strategy-included,
.bb-ref-locations,
.bb-ref-final-cta,
.bh-section--cream,
.bh-section--gray {
  background: var(--bbp-paper) !important;
}

.bb-ref-section,
.bh-section,
.bb-modern-flow,
.bb-ref-locations,
.bh-strategy-value {
  padding-top: clamp(76px, 8vw, 122px) !important;
  padding-bottom: clamp(76px, 8vw, 122px) !important;
}

.bb-modern-flow__intro,
.bb-ref-heading,
.bh-section__header {
  max-width: 880px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.bb-modern-flow__intro h2,
.bb-ref-heading h2,
.bh-section__header h2,
.bb-ref-copy-block h2 {
  font-size: clamp(2.25rem, 4.35vw, 4.35rem) !important;
  line-height: 0.98 !important;
}

/* Cards: deliberate editorial tiles, no cheap shadows. */
.bb-modern-flow__card,
.bh-strategy-included__grid article,
.bb-ref-service-card,
.bh-feature-card,
.bh-feature-list__item,
.bh-contact-option,
.bh-step,
.bh-promo,
.bh-testimonial-card,
.bh-portfolio-item,
.bh-math-table,
.bh-nl-standalone,
.bb-ref-location-map,
.bh-faq-item,
.bh-faq__item {
  background: var(--bbp-surface) !important;
  border: 1px solid rgba(15,20,27,0.12) !important;
  border-radius: var(--bbp-radius-lg) !important;
  box-shadow: none !important;
}

.bb-modern-flow__card:hover,
.bh-strategy-included__grid article:hover,
.bb-ref-service-card:hover,
.bh-feature-card:hover,
.bh-feature-list__item:hover,
.bh-contact-option:hover,
.bh-step:hover,
.bh-testimonial-card:hover,
.bh-portfolio-item:hover,
.bh-faq-item:hover,
.bh-faq__item:hover {
  transform: none !important;
  border-color: rgba(15,20,27,0.2) !important;
  box-shadow: none !important;
}

.bb-modern-flow__grid--four,
.bh-strategy-included__grid,
.bb-ref-card-grid--four {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.bb-modern-flow__card,
.bh-strategy-included__grid article {
  min-height: 245px !important;
  padding: clamp(22px, 2.6vw, 32px) !important;
}

.bb-modern-flow__card:nth-child(1),
.bh-strategy-included__grid article:nth-child(1) { background: #fffdf7 !important; }
.bb-modern-flow__card:nth-child(2),
.bh-strategy-included__grid article:nth-child(2) { background: #f0eadc !important; }
.bb-modern-flow__card:nth-child(3),
.bh-strategy-included__grid article:nth-child(3) { background: #edf5d7 !important; }
.bb-modern-flow__card:nth-child(4),
.bh-strategy-included__grid article:nth-child(4) { background: #fffdf7 !important; }

/* =========================================================
   Pricing: compact control, confident cards, readable includes
   ========================================================= */
.bh-section--dark > .bh-shell,
.bb-ref-section--pricing > .bh-shell {
  position: relative;
  z-index: 1;
}

.bh-pricing-toggle,
.bb-ref-pricing-toggle {
  width: max-content !important;
  max-width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  margin: 0 auto 28px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.055) !important;
  box-shadow: none !important;
}

.bh-pricing-toggle__label,
.bh-pricing-toggle__option,
.bb-ref-pricing-toggle button {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.74) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
}

.bh-pricing-toggle__label--active,
.bh-pricing-toggle__option.is-active,
.bb-ref-pricing-toggle button.is-active {
  color: var(--bbp-ink) !important;
  background: var(--bbp-lime) !important;
  border-color: rgba(15,20,27,0.22) !important;
}

.bh-pricing-toggle__switch {
  width: 48px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
}

.bh-pricing-toggle__knob {
  width: 22px !important;
  height: 22px !important;
  top: 2px !important;
  box-shadow: none !important;
}
.bh-pricing-toggle__switch[aria-checked="true"] .bh-pricing-toggle__knob { left: 23px !important; }
.bh-pricing-toggle__switch[aria-checked="false"] .bh-pricing-toggle__knob { left: 2px !important; }

.bh-badge--lime,
.bh-pricing-toggle__label .bh-badge,
.bb-ref-pricing-toggle button span {
  background: rgba(15,20,27,0.12) !important;
  color: var(--bbp-ink) !important;
  border-radius: 999px !important;
}

.bh-pricing-grid,
.bb-ref-pricing-grid {
  align-items: stretch !important;
  gap: 22px !important;
}

.bh-plan-card,
.bb-ref-plan-card {
  min-height: auto !important;
  padding: clamp(26px, 3.1vw, 38px) !important;
  background: var(--bbp-surface) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
}

.bb-ref-plan-card { border-color: rgba(15,20,27,0.12) !important; }
.bh-plan-card--recommended,
.bb-ref-plan-card.is-featured {
  border-color: var(--bbp-lime) !important;
  box-shadow: inset 0 0 0 1px rgba(200,255,61,0.55) !important;
  transform: none !important;
}

.bh-plan-card__header,
.bb-ref-plan-card__head {
  margin-bottom: 18px !important;
}

.bh-plan-card__icon,
.bb-ref-plan-card__head span {
  display: none !important;
}

.bh-plan-card__name,
.bb-ref-plan-card h3 {
  color: var(--bbp-ink) !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  letter-spacing: -0.04em !important;
}

.bh-plan-card__tagline,
.bb-ref-plan-card p {
  color: rgba(15,20,27,0.62) !important;
}

.bh-plan-card__price,
.bb-ref-plan-card__price {
  margin: 24px 0 10px !important;
}

.bh-plan-card__currency,
.bh-plan-card__amount,
.bh-plan-card__period,
.bb-ref-plan-card__price strong,
.bb-ref-plan-card__price span {
  color: var(--bbp-ink) !important;
}

.bh-plan-card__amount,
.bb-ref-plan-card__price strong {
  font-size: clamp(3rem, 5vw, 4.3rem) !important;
  letter-spacing: -0.075em !important;
}

.bh-plan-card__billing,
.bb-ref-plan-card .bh-plan-card__billing {
  color: rgba(15,20,27,0.52) !important;
}

.bh-plan-card__features,
.bb-ref-plan-card ul {
  margin-top: 24px !important;
  gap: 12px !important;
}

.bh-plan-card__features li,
.bb-ref-plan-card li {
  color: rgba(15,20,27,0.78) !important;
  font-weight: 640 !important;
}

.bh-plan-card__features svg,
.bb-ref-plan-card li svg,
.bh-included__list svg {
  color: var(--bbp-lime-ink) !important;
}

.bh-plan-card__badge,
.bb-ref-plan-card__badge {
  background: var(--bbp-carbon) !important;
  color: var(--bbp-lime) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.bh-section--dark .bh-included,
.bb-ref-section--pricing .bh-included {
  margin-top: 34px !important;
}

.bh-section--dark .bh-included__label,
.bb-ref-section--pricing .bh-included__label {
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: 0.12em !important;
}

.bh-section--dark .bh-included__list li,
.bh-section--dark .bh-included__list span,
.bb-ref-section--pricing .bh-included__list li,
.bb-ref-section--pricing .bh-included__list span {
  color: rgba(255,255,255,0.78) !important;
}

.bh-section--dark .bh-included__list svg,
.bb-ref-section--pricing .bh-included__list svg {
  color: var(--bbp-lime) !important;
}

/* =========================================================
   FAQ: one consistent accessible pattern across pages
   ========================================================= */
.bh-faq,
.bb-ref-faq {
  max-width: 920px !important;
  margin-inline: auto !important;
  gap: 12px !important;
}

.bh-faq-item,
.bh-faq__item,
.bb-ref-faq__item {
  border-radius: 18px !important;
  background: var(--bbp-surface) !important;
  border: 1px solid rgba(15,20,27,0.12) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.bh-faq-item__trigger,
.bh-faq__question {
  width: 100%;
  min-height: 62px;
  padding: 20px 22px !important;
  color: var(--bbp-ink) !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 780 !important;
}

.bh-faq-item__body,
.bh-faq__answer {
  padding: 0 22px 22px !important;
  color: rgba(15,20,27,0.68) !important;
}

.bh-faq-item__body p,
.bh-faq__answer p {
  color: rgba(15,20,27,0.68) !important;
}

.bh-faq-item__trigger[aria-expanded="true"] {
  border-bottom: 1px solid rgba(15,20,27,0.08) !important;
}

.bh-faq-item__icon,
.bh-faq__chevron {
  color: rgba(15,20,27,0.48) !important;
}

/* =========================================================
   Final CTA, footer and dark panels
   ========================================================= */
.bb-ref-final-cta__inner,
.bh-cta-final__inner,
.bb-ref-dark-panel,
.bh-strategy-value__inner {
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
  border-radius: 34px !important;
}

.bb-ref-final-cta__inner .bb-ref-hero__actions,
.bh-cta-final__actions {
  justify-content: center;
}

.bh-footer,
.bh-footer__newsletter {
  background: #06090e !important;
}

.bh-footer__main,
.bh-footer__bottom,
.bh-footer__newsletter {
  border-color: rgba(255,255,255,0.12) !important;
}

.bh-footer .bh-logo__text {
  color: #fff !important;
}

/* =========================================================
   Forms and tables
   ========================================================= */
.bh-input,
.bh-textarea,
.bh-select,
input,
textarea,
select,
.bb-ref-domain__form,
.bb-ref-domain__form input,
.bh-contact-form input,
.bh-contact-form textarea,
.bh-nl-form input {
  border-radius: 14px !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.bh-input:focus,
.bh-textarea:focus,
.bh-select:focus {
  outline: none !important;
  border-color: rgba(15,20,27,0.28) !important;
  box-shadow: 0 0 0 4px rgba(200,255,61,0.25) !important;
}

.bh-math-table th,
.bh-math-table td {
  color: var(--bbp-ink) !important;
}

/* =========================================================
   Responsive consistency
   ========================================================= */
@media (max-width: 1180px) {
  .bb-modern-flow__grid--four,
  .bh-strategy-included__grid,
  .bb-ref-card-grid--four,
  .bb-ref-logos ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .bb-ref-logos li:nth-child(2n) { border-right: 0; }
}

@media (max-width: 1023px) {
  .bh-header__inner { height: 68px !important; }
  .bb-ref-hero,
  .bh-page-hosting-hero,
  .bh-features-hero,
  .bh-contact-hero,
  .bh-free-hero {
    padding-top: calc(68px + 56px) !important;
  }
  .bb-ref-hero__grid,
  .bb-ref-media-grid,
  .bb-ref-dark-panel,
  .bh-strategy-value__inner,
  .bh-strategy-value--hosting .bh-strategy-value__inner {
    grid-template-columns: 1fr !important;
  }
  .bb-ref-hero__art {
    justify-content: flex-start !important;
  }
  .bb-polish-hero-visual {
    max-width: 420px !important;
  }
  .bh-mobile-menu { top: 68px !important; }
  body.admin-bar .bh-mobile-menu { top: 100px !important; }
}

@media (max-width: 760px) {
  .bb-ref-hero h1,
  .bh-page-hosting-hero h1,
  .bh-features-hero h1,
  .bh-contact-hero h1,
  .bh-free-hero h1,
  .bb-modern-flow__intro h2,
  .bb-ref-heading h2,
  .bh-section__header h2 {
    font-size: clamp(2.25rem, 11vw, 3.4rem) !important;
    line-height: 1 !important;
  }
  .bb-modern-flow__grid--four,
  .bh-strategy-included__grid,
  .bb-ref-card-grid--four,
  .bb-ref-logos ul,
  .bh-pricing-grid,
  .bb-ref-pricing-grid {
    grid-template-columns: 1fr !important;
  }
  .bb-ref-logos li {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15,20,27,0.08);
  }
  .bb-ref-logos li:last-child { border-bottom: 0; }
  .bb-ref-domain__box,
  .bb-ref-domain__form {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .bb-ref-domain__form button { width: 100%; }
  .bb-ref-hero__mini-card { display: none !important; }
  .bh-pricing-toggle,
  .bb-ref-pricing-toggle {
    width: 100% !important;
  }
  .bh-pricing-toggle__label,
  .bh-pricing-toggle__option,
  .bb-ref-pricing-toggle button {
    flex: 1 1 0;
    justify-content: center;
  }
}


/* =========================================================
   v4.0 final audit stabilizers
   These rules remove remaining layout conflicts from older CSS layers.
   ========================================================= */

/* Keep navigation in normal document flow while preserving sticky behaviour.
   This prevents the header from covering page content and fixes admin-bar overlap. */
.bh-header {
  position: sticky !important;
  top: 0 !important;
  inset: auto 0 auto 0 !important;
}
body.admin-bar .bh-header { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar .bh-header { top: 46px !important; }
}

/* With sticky header, page heroes should not carry fixed-header compensation. */
.bb-ref-hero {
  min-height: auto !important;
  padding-top: clamp(86px, 9vw, 132px) !important;
  padding-bottom: clamp(92px, 9vw, 130px) !important;
}
body.admin-bar .bb-ref-hero,
body.admin-bar .bh-page-hosting-hero,
body.admin-bar .bh-features-hero,
body.admin-bar .bh-contact-hero,
body.admin-bar .bh-free-hero {
  padding-top: clamp(74px, 8vw, 112px) !important;
}
.bh-page-hosting-hero,
.bh-features-hero,
.bh-contact-hero,
.bh-free-hero {
  padding-top: clamp(74px, 8vw, 112px) !important;
  padding-bottom: clamp(74px, 8vw, 108px) !important;
}

/* Generic WP pages/posts do not have custom hero templates. Give them clean top rhythm. */
.bh-main > .bh-section:first-child:not(.bh-section--dark),
.bh-main > .bh-section:first-child:not(.bh-cta-final) {
  padding-top: clamp(72px, 8vw, 112px) !important;
}

/* Mobile drawer: because the header is sticky/in-flow, the drawer starts below it and does not double-pad. */
.bh-mobile-menu {
  top: 72px !important;
  padding: 26px 0 32px !important;
}
body.admin-bar .bh-mobile-menu { top: 104px !important; }
@media (max-width: 1023px) {
  .bh-mobile-menu { top: 68px !important; padding-top: 24px !important; }
  body.admin-bar .bh-mobile-menu { top: 100px !important; }
}
@media (max-width: 782px) {
  body.admin-bar .bh-mobile-menu { top: 114px !important; }
}

/* Pricing tabs: one segmented control everywhere, no ambiguous switch. */
.bh-pricing-toggle button,
.bb-ref-pricing-toggle button {
  appearance: none;
  cursor: pointer;
}
.bh-pricing-toggle__option,
.bh-pricing-toggle button,
.bb-ref-pricing-toggle button {
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.74) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 820 !important;
}
.bh-pricing-toggle__option.is-active,
.bh-pricing-toggle button.is-active,
.bb-ref-pricing-toggle button.is-active {
  color: var(--bbp-ink) !important;
  background: var(--bbp-lime) !important;
  border-color: rgba(15,20,27,0.22) !important;
}
.bh-pricing-toggle__option .bh-badge,
.bh-pricing-toggle button .bh-badge,
.bb-ref-pricing-toggle button span {
  background: rgba(15,20,27,0.12) !important;
  color: var(--bbp-ink) !important;
  border: 0 !important;
  margin-left: 6px;
}

/* Plan cards: ensure no content disappears on dark sections. */
.bh-plan-card *,
.bb-ref-plan-card * {
  text-shadow: none !important;
}
.bh-plan-card__name,
.bh-plan-card__tagline,
.bh-plan-card__price,
.bh-plan-card__billing,
.bh-plan-card__features,
.bb-ref-plan-card h3,
.bb-ref-plan-card p,
.bb-ref-plan-card__price,
.bb-ref-plan-card ul {
  position: relative;
  z-index: 2;
}
.bh-plan-card__header,
.bb-ref-plan-card__head {
  min-height: 0 !important;
}
.bh-plan-card__features li span,
.bb-ref-plan-card li span,
.bh-included__list span {
  color: inherit !important;
}

/* Header logo and CTA fit better on real browser widths. */
.bh-header .bh-shell--wide {
  max-width: 1540px !important;
}
.bh-header__actions {
  flex-shrink: 0;
}
.bh-header .bh-btn--sm,
.bh-header__login {
  white-space: nowrap;
}

/* Footer and CTA dark cards must stay dark despite global card rules. */
.bb-ref-final-cta__inner,
.bh-cta-final__inner,
.bb-ref-dark-panel,
.bh-strategy-value__inner {
  background-color: var(--bbp-carbon) !important;
  color: rgba(255,255,255,0.76) !important;
}
.bb-ref-final-cta__inner h1,
.bb-ref-final-cta__inner h2,
.bb-ref-final-cta__inner h3,
.bh-cta-final__inner h1,
.bh-cta-final__inner h2,
.bh-cta-final__inner h3,
.bb-ref-dark-panel h1,
.bb-ref-dark-panel h2,
.bb-ref-dark-panel h3,
.bh-strategy-value__inner h1,
.bh-strategy-value__inner h2,
.bh-strategy-value__inner h3 {
  color: #fff !important;
}
.bb-ref-final-cta__inner p,
.bh-cta-final__inner p,
.bb-ref-dark-panel p,
.bh-strategy-value__inner p {
  color: rgba(255,255,255,0.76) !important;
}

/* FAQ icons are stable and questions remain readable. */
.bh-faq-item__trigger,
.bh-faq__question {
  cursor: pointer;
}
.bh-faq-item__trigger span,
.bh-faq__question span {
  color: var(--bbp-ink) !important;
}
.bh-faq-item__trigger[aria-expanded="true"] .bh-faq-item__icon {
  transform: rotate(45deg);
}

/* Reduce accidental empty-looking spaces on pricing and content sections. */
.bh-section--dark .text-center,
.bb-ref-section--pricing .text-center {
  color: rgba(255,255,255,0.74) !important;
}
.bh-pricing-grid,
.bb-ref-pricing-grid {
  margin-top: clamp(22px, 3vw, 34px) !important;
}

@media (max-width: 760px) {
  .bb-ref-hero { padding-top: 68px !important; }
  .bh-header .bh-btn--sm { display: none !important; }
  .bh-logo__text { font-size: 1.05rem !important; }
  .bh-pricing-toggle__option .bh-badge,
  .bh-pricing-toggle button .bh-badge { display: none !important; }
}


/* =========================================================
   v4.1 second audit stabilizers
   Clean up remaining edge cases after full package review.
   ========================================================= */

/* Light sections must never inherit dark-panel text colors from earlier layers. */
.bh-section:not(.bh-section--dark) h1,
.bh-section:not(.bh-section--dark) h2,
.bh-section:not(.bh-section--dark) h3,
.bh-section:not(.bh-section--dark) h4,
.bb-ref-section--light h1,
.bb-ref-section--light h2,
.bb-ref-section--light h3,
.bb-modern-flow h1,
.bb-modern-flow h2,
.bb-modern-flow h3,
.bb-ref-locations h1,
.bb-ref-locations h2,
.bb-ref-locations h3,
.bb-ref-final-cta:not(.bh-section--dark) > .bh-shell > h1,
.bb-ref-final-cta:not(.bh-section--dark) > .bh-shell > h2 {
  color: var(--bbp-ink) !important;
}

.bh-section:not(.bh-section--dark) p,
.bh-section:not(.bh-section--dark) li,
.bb-ref-section--light p,
.bb-ref-section--light li,
.bb-modern-flow p,
.bb-modern-flow li,
.bb-ref-locations p,
.bb-ref-locations li {
  color: var(--bbp-muted) !important;
}

/* Dark sections with white pricing cards need explicit split contrast. */
.bh-section--dark .bh-plan-card h1,
.bh-section--dark .bh-plan-card h2,
.bh-section--dark .bh-plan-card h3,
.bh-section--dark .bh-plan-card p,
.bh-section--dark .bh-plan-card li,
.bh-section--dark .bh-plan-card span,
.bb-ref-section--pricing .bb-ref-plan-card h1,
.bb-ref-section--pricing .bb-ref-plan-card h2,
.bb-ref-section--pricing .bb-ref-plan-card h3,
.bb-ref-section--pricing .bb-ref-plan-card p,
.bb-ref-section--pricing .bb-ref-plan-card li,
.bb-ref-section--pricing .bb-ref-plan-card span {
  color: var(--bbp-ink) !important;
}

.bh-section--dark .bh-included__label,
.bh-section--dark .bh-included__list li,
.bh-section--dark .bh-included__list span {
  color: rgba(255,255,255,0.78) !important;
}

/* Keep first standard content sections calm without adding accidental hero-sized gaps. */
.bh-main > .bh-section:first-child:not(.bh-section--dark):not(.bh-cta-final) {
  padding-top: clamp(64px, 7vw, 96px) !important;
}

/* Admin-bar state: sticky header stays in flow; only the sticky offset changes. */
body.admin-bar .bh-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar .bh-header { top: 46px !important; }
}

/* Segmented pricing controls should not look like a loose form control. */
.bh-pricing-toggle,
.bb-ref-pricing-toggle {
  max-width: max-content;
  justify-self: center;
}
@media (max-width: 680px) {
  .bh-pricing-toggle,
  .bb-ref-pricing-toggle {
    max-width: 100%;
  }
}

/* Native details FAQ fallback if a future page uses <details>. */
.bh-faq__item[open] .bh-faq__answer {
  display: block;
}
.bh-faq__item .bh-faq__question {
  cursor: pointer;
}