/* ==========================================================================
   Buzzhref - the site's components on top of the Bootstrap theme (css/buzzhref-bootstrap.min.css).
   The look of the WordPress (Divi child theme) site: navy headings, teal / purple buttons with a soft glow, the
   purple → teal gradient panels, clouds and stars. Brand colours: --bh-* (src/scss/buzzhref-bootstrap.scss).
   ========================================================================== */

body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.bh-skip { position: absolute; top: .5rem; left: .5rem; z-index: 1100; padding: .5rem 1rem; background: #fff; border-radius: .25rem; }

/* ── type helpers ── */
.bh-eyebrow {
  margin-bottom: .75rem;
  color: var(--bh-navy);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
.bh-gradient-text {
  background: var(--bh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bh-star { display: block; margin-bottom: 1.25rem; }
.bh-star-list { list-style: none; padding-left: 0; }
.bh-star-list li { position: relative; padding-left: 1.25rem; margin-bottom: .5rem; }
.bh-star-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  background: url(../img/list-star.png) no-repeat center / contain;
}

/* ── buttons ── */
.btn-lg { letter-spacing: 1px; }
.bh-btn-glow { border: 0; box-shadow: 0 8px 18px 0 rgb(0 218 197 / .5); }
.bh-btn-glow:hover, .bh-btn-glow:focus-visible { box-shadow: 0 10px 22px 0 rgb(0 218 197 / .6); transform: translateY(-1px); }
.bh-btn-glow--purple { box-shadow: 0 8px 18px 0 rgb(153 132 212 / .5); }
.bh-btn-glow--purple:hover, .bh-btn-glow--purple:focus-visible { box-shadow: 0 10px 22px 0 rgb(153 132 212 / .6); }
.bh-btn-glow--yellow { box-shadow: 0 8px 18px 0 rgb(255 216 104 / .55); color: #fff; }
.bh-btn-glow--yellow:hover, .bh-btn-glow--yellow:focus-visible { box-shadow: 0 10px 22px 0 rgb(255 216 104 / .65); color: #fff; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { color: #fff; }
.btn-primary:hover { background-color: #00c7b4; border-color: #00c7b4; }
.btn-secondary:hover { background-color: var(--bh-purple-dark); border-color: var(--bh-purple-dark); }
.btn-outline-secondary { border-width: 1px; color: var(--bh-purple); border-color: var(--bh-purple); letter-spacing: 0; }
.btn-outline-secondary:hover { color: #fff; }
.btn-outline-login {
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-padding-y: .3125rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-color: var(--bh-teal-dark);
  --bs-btn-border-color: var(--bh-teal-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bh-teal-dark);
  --bs-btn-hover-border-color: var(--bh-teal-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bh-teal-dark);
  text-transform: uppercase;
}
/* the rocket's flame under a button ("Sign up for free ride !", "Send") */
.bh-btn-engine { position: relative; }
.bh-btn-engine::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 41px;
  height: 55px;
  margin-left: -20px;
  background: url(../img/engine-down.png) no-repeat center top / contain;
  pointer-events: none;
}

/* ── header ── */
.bh-header { position: sticky; top: 0; z-index: 1030; background: #fff; box-shadow: 0 1px 0 rgb(7 59 87 / .06); }
.bh-header .navbar { padding: 1.125rem 0; }
.bh-header .nav-link {
  position: relative;
  color: var(--bh-navy);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
}
.bh-header .nav-link:hover, .bh-header .nav-link:focus-visible { color: var(--bh-teal-dark); text-decoration: none; }
.bh-header .nav-link.active { color: var(--bh-navy); }
@media (min-width: 992px) {
  .bh-header .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -.25rem;
    height: 2px;
    background: var(--bh-teal);
  }
  .bh-header__account { margin-left: 1rem; padding-left: 1.75rem; border-left: 1px solid var(--bs-border-color); }
}
@media (max-width: 991.98px) {
  .bh-header .navbar-collapse { padding: 1rem 0 .5rem; }
  .bh-header .navbar-nav .nav-link { padding: .625rem 0; }
  .bh-header__account { padding-top: .75rem; margin-top: .5rem; border-top: 1px solid var(--bs-border-color); }
}

/* ── sections ── */
.bh-section { padding: 5rem 0; }
@media (max-width: 767.98px) { .bh-section { padding: 3.5rem 0; } }

/* clouds along the bottom of a hero */
.bh-clouds {
  height: 120px;
  margin-top: -1rem;
  background: url(../img/clouds.webp) no-repeat center bottom / 1920px auto;
}
.bh-clouds--contact { background-image: url(../img/clouds-contact.webp); }
@media (max-width: 767.98px) { .bh-clouds { height: 70px; background-size: 1100px auto; } }

/* ── home: hero ── */
.bh-hero { position: relative; padding-top: 3.5rem; background: linear-gradient(to bottom, #fff 0%, #fff 70%, var(--bh-pale) 100%); }
.bh-hero__title { font-size: clamp(2.125rem, 4vw, 2.875rem); line-height: 1.3; }
.bh-hero__lead { margin: 1.5rem 0 2rem; color: var(--bh-navy); font-size: 1.125rem; letter-spacing: 1px; line-height: 1.6; }
.bh-hero__action { position: relative; display: inline-flex; align-items: flex-start; }
.bh-hero__rocket { position: absolute; right: 100%; top: .125rem; margin-right: .75rem; }
.bh-hero__action small { color: var(--bh-navy); }
.bh-hero__img { filter: drop-shadow(0 30px 40px rgb(7 59 87 / .08)); }

/* ── home: the three steps ── */
.bh-steps__title { font-size: 1.75rem; font-weight: 600; line-height: 1.4; }
.bh-steps { margin-top: 2.5rem; }
.bh-steps li + li { margin-top: 1.75rem; }
.bh-steps h3 {
  position: relative;
  padding-left: 1.875rem;
  font-size: 1.75rem;
}
.bh-steps h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 21px;
  height: 21px;
  margin-top: -10px;
  background: url(../img/heading-star.png) no-repeat center / contain;
}
.bh-steps p { margin: .5rem 0 0; }

/* ── home: analytics ── */
.bh-feature__title { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.3; margin-bottom: 1.5rem; }

/* ── home: the gradient panels ── */
.bh-panels { padding: 2rem 0 5rem; background: linear-gradient(to bottom, #fff 0%, var(--bh-pale) 35%, #fff 100%); }
.bh-panel {
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl);
  color: #fff;
}
.bh-panel + .bh-panel { margin-top: 3.5rem; }
.bh-panel--unibox { background: linear-gradient(to right, #9885d4, #71b7cd 55%, #19d8c5); }
.bh-panel--outreach { background: linear-gradient(to right, #19d8c5, #71b7cd 45%, #9885d4); }
.bh-panel__text { padding: 3.5rem 2rem 2rem; }
@media (min-width: 992px) { .bh-panel__text { padding: 4rem 2rem 4rem 5rem; } }
.bh-panel__title { color: #fff; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.35; }
.bh-panel__text p { margin-top: 1.25rem; font-size: .9375rem; }
.bh-panel__img { align-self: flex-end; padding: 0 1.5rem; text-align: center; }
@media (min-width: 992px) { .bh-panel__img { padding: 2.5rem 2.5rem 0 0; } }
.bh-pill {
  display: inline-block;
  padding: 0 .5rem;
  border-radius: 2rem;
  background: #fff;
  line-height: 1.25;
}
.bh-pill { color: var(--bh-teal-dark); }
.bh-panel--unibox .bh-pill { color: #4fb8c9; }
.bh-panel--outreach .bh-pill { color: var(--bh-purple); }

/* ── the shuttle card + "Anytime" (every content page, _ShuttleCta) ── */
.bh-shuttle { padding: 4rem 0 0; }
.bh-shuttle__card {
  position: relative;
  padding: 4rem 1.5rem 0;
  border-radius: var(--bs-border-radius-xl);
  background: #fff;
  box-shadow: 0 -20px 40px -10px rgb(7 59 87 / .06);
}
.bh-shuttle__title { font-size: clamp(1.75rem, 3.5vw, 2.375rem); margin-bottom: 2.5rem; }
.bh-shuttle__action { position: relative; display: flex; align-items: center; justify-content: center; gap: 2.5rem; }
.bh-shuttle__features { display: block; margin: 5.5rem auto 0; }
.bh-ride {
  padding: 8rem 0 5rem;
  background: url(../img/ride-bg.webp) no-repeat center top / 1920px auto, linear-gradient(to bottom, var(--bh-pale), #fff 60%);
}
.bh-ride__title { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 400; line-height: 1.5; }
.bh-ride__text { margin: 1rem 0 2.75rem; color: var(--bh-navy); }
@media (max-width: 767.98px) { .bh-ride { padding-top: 5rem; background-size: 1100px auto, auto; } }

/* ── page heroes (pricing, contact, legal, error) ── */
.bh-page-hero { position: relative; padding-top: 3.5rem; }
.bh-page-hero__title { font-size: clamp(1.875rem, 3.6vw, 2.375rem); }

/* ── pricing ── */
.bh-pricing { padding-bottom: 4rem; background: url(../img/deco-pricing.png) no-repeat center 9rem / min(1824px, 120%) auto; }
.bh-plans { margin-top: 3.5rem; }
.bh-plan {
  position: relative;
  height: 100%;
  padding: 2rem 2rem 3.75rem;
  border-radius: var(--bs-border-radius-xl);
  background: #fff;
  box-shadow: 0 10px 40px rgb(7 59 87 / .08);
}
.bh-plan__name { font-size: 1rem; margin-bottom: 1.25rem; }
.bh-plan__name small { font-size: .8125rem; font-weight: 400; }
.bh-plan__price { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px dashed var(--bs-gray-400); }
.bh-plan__amount { color: var(--bh-teal); font-size: 2.75rem; font-weight: 700; line-height: 1; }
.bh-plan__amount sup { top: -.7em; font-size: 50%; }
.bh-plan--premium .bh-plan__amount { color: var(--bh-yellow); }
.bh-plan__accounts { color: var(--bh-navy); font-size: .8125rem; font-weight: 700; line-height: 1.45; }
.bh-plan__features { margin-bottom: 0; color: var(--bh-navy); font-size: .9375rem; }
.bh-plan__action { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(50%); text-align: center; }
@media (max-width: 767.98px) { .bh-plans > div + div { margin-top: 3.5rem; } }

/* ── contact ── */
/* the stars and planets stay in the margins, clear of the text and the form */
.bh-contact { background: url(../img/deco-stars-left.png) no-repeat left 1.5rem top 55%, url(../img/deco-stars-right.png) no-repeat right .5rem top 1rem; }
@media (max-width: 1399.98px) { .bh-contact { background: none; } }
.bh-contact__planet { margin-bottom: 2.5rem; }
.bh-contact__title { font-size: clamp(2rem, 3.6vw, 2.375rem); line-height: 1.45; }
.bh-contact__lead { margin-top: 1.5rem; color: var(--bh-navy); font-size: 1.125rem; letter-spacing: 1px; }
.bh-contact__form {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem 4.5rem;
  background: #fff;
  box-shadow: 0 0 40px rgb(7 59 87 / .07);
}
.bh-contact__form .form-label { letter-spacing: .5px; }
.bh-contact__email { margin: 1rem 0 0; color: var(--bh-navy); }
.bh-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── legal ── */
.bh-legal-hero { background: url(../img/deco-legal.png) no-repeat center 4rem / min(1825px, 120%) auto; }
.bh-legal-hero__updated { margin-top: 1.25rem; color: var(--bh-gray); font-size: .8125rem; }

/* ── article text (blog posts, legal pages) ── */
.bh-prose { max-width: 45rem; color: var(--bh-navy-soft); font-size: 1rem; line-height: 1.85; }
.bh-prose > *:first-child { margin-top: 0; }
.bh-prose h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.bh-prose h3 { margin: 2rem 0 .875rem; font-size: 1.25rem; }
.bh-prose h4 { margin: 1.75rem 0 .75rem; font-size: 1.0625rem; }
.bh-prose p, .bh-prose ul, .bh-prose ol, .bh-prose pre, .bh-prose blockquote { margin-bottom: 1.25rem; }
.bh-prose li { margin-bottom: .375rem; }
.bh-prose strong { color: var(--bh-navy); }
.bh-prose img { display: block; margin: 1.5rem auto; border-radius: .375rem; }
.bh-prose a { font-weight: 600; }
.bh-prose blockquote {
  padding: 2rem 2.25rem;
  background: var(--bh-teal);
  color: #fff;
  font-style: italic;
  font-weight: 600;
}
.bh-prose blockquote p:last-child { margin-bottom: 0; }
.bh-prose blockquote strong, .bh-prose blockquote a { color: #fff; }
.bh-prose pre {
  padding: 1rem 1.25rem;
  border-radius: .375rem;
  background: var(--bh-pale);
  color: var(--bh-navy);
  white-space: pre-wrap;
}
.bh-prose--legal { max-width: 44rem; }
.bh-prose--legal h3 { font-size: 1.75rem; font-weight: 400; }

/* ── blog ── */
.bh-blog-featured { padding: 3.5rem 0; background: linear-gradient(to bottom, var(--bh-pale), #fff); }
.bh-blog-featured__title { font-size: clamp(1.625rem, 2.8vw, 2rem); line-height: 1.3; }
.bh-blog-featured__title a, .bh-post-card__title a { color: var(--bh-navy); }
.bh-blog-featured__title a:hover, .bh-post-card__title a:hover { color: var(--bh-teal-dark); text-decoration: none; }
.bh-blog-featured__text { margin: 1rem 0; }
.bh-blog-featured__img img { border-radius: .5rem; box-shadow: 0 20px 40px rgb(7 59 87 / .12); }
.bh-post-meta { margin: 0; color: var(--bh-navy); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.bh-post-card__img { display: block; overflow: hidden; margin-bottom: 1.25rem; border-radius: .375rem; aspect-ratio: 8 / 5; background: var(--bh-pale); }
.bh-post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bh-post-card__img:hover img { transform: scale(1.03); }
.bh-post-card__title { font-size: 1.0625rem; line-height: 1.45; margin-bottom: .625rem; }
.bh-post-card__text { margin-bottom: .875rem; font-size: .875rem; line-height: 1.65; }

.bh-post__header { padding-top: 3.5rem; }
.bh-post__title { max-width: 48rem; margin: 0 auto; font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.3; }
.bh-post__date { margin: .75rem 0 2.25rem; color: var(--bh-gray); font-size: .875rem; }
.bh-post__img { padding-bottom: 3.5rem; background: url(../img/clouds-post.webp) no-repeat center 65% / 1920px auto; }
.bh-post__img img { width: 100%; max-width: 50rem; border-radius: .25rem; }
.bh-related { margin-top: 2rem; border-top: 1px solid var(--bs-border-color); }
.bh-related__title { margin-bottom: 2.5rem; font-size: 1.75rem; }

/* ── error ── */
.bh-error { padding-top: 5rem; }
.bh-error__text { max-width: 32rem; margin-top: 1rem; }

/* ── footer ── */
.bh-footer { padding: 2rem 0; border-top: 1px solid var(--bs-border-color); }
.bh-footer__brand, .bh-footer__spacer { width: 14rem; }
.bh-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bh-gray);
  color: #fff;
  font-size: .75rem;
}
.bh-footer__social a:hover { background: var(--bh-navy); text-decoration: none; }
.bh-footer__legal li, .bh-footer__legal .btn-link {
  color: var(--bh-gray);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.bh-footer__legal li + li::before { content: "|"; margin: 0 .75rem; color: var(--bh-gray); font-weight: 400; }
.bh-footer__legal a { color: var(--bh-gray); }
.bh-footer__legal a:hover, .bh-footer__legal .btn-link:hover { color: var(--bh-navy); text-decoration: none; }
.bh-footer__legal p { color: var(--bh-gray); font-size: .6875rem; }

@media (prefers-reduced-motion: reduce) {
  .bh-btn-glow:hover, .bh-post-card__img:hover img { transform: none; }
}