/*
 * Webflow Overrides
 * Minimal fixes only — the inline <style> blocks in the body HTML
 * now provide the fluid typography, variables, and responsive breakpoints.
 * This file only handles browser defaults that Webflow's runtime normalizes.
 */

/* Reset browser default link color — Webflow's inline styles handle this too,
   but we keep it as a safety net */
a { text-decoration: none; color: inherit; }

/* Swiper slides must overflow into the container's padding area so cards peek */
.swiper.is-clients { overflow: visible; }

/* Mobile nav — Webflow IX2 animates inline styles; we replicate via JS */
body.no-scroll { overflow: hidden; }

/* Pricing page dropdown hover — matches live site's :visited yellow */
.fs-selectcustom_link:hover { background-color: var(--yellow); color: var(--brown); border-radius: .25rem; }

/* === Promo countdown bar === */
.countdown_wrapper {
  z-index: 2147483647;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  background-color: var(--yellow);
  justify-content: center;
  align-items: center;
  height: 1.875rem;
  padding: 0.375rem 0.5rem;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}
.countdown_txt {
  font-family: var(--font--body-family);
  font-size: var(--body-small--font-size);
  font-weight: 600;
}
.countdown_txt.is-link { text-decoration: underline; }
.countdown_ellipse {
  background-color: var(--coral);
  border-radius: 50%;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
}
.countdown_ellipse.is-small {
  background-color: var(--brown);
  width: 0.25rem;
  height: 0.25rem;
}
.c-stick {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
body:has(.countdown_wrapper) .page-wrap { padding-top: 1.875rem; }
body:has(.countdown_wrapper) .nav { top: 1.875rem; }

@media screen and (max-width: 767px) {
  .countdown_wrapper { z-index: 9999; grid-column-gap: .375rem; grid-row-gap: .375rem; }
  .countdown_txt { font-size: .6875rem; }
}
@media screen and (max-width: 479px) {
  .countdown_wrapper { z-index: 9999; grid-column-gap: .375rem; grid-row-gap: .375rem; }
  .countdown_txt { font-size: .6875rem; }
}

/* === HostAdvice hero badge === */
.hero-img-wrapper, .img-hold { position: relative; }
.grid_slot-rating {
  pointer-events: none;
  width: 100%;
  position: absolute;
  inset: 0%;
}
.hero-badge_img-wrapper {
  z-index: 1;
  position: absolute;
  inset: auto auto 2.25rem 2.25rem;
}
.hero-badge_img-wrapper.is-static {
  pointer-events: auto;
  display: block;
}
.div-badge {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(251, 249, 241, 0.5);
  border-radius: 1rem;
  width: 16.25rem;
  max-width: 100%;
  padding: 1.5rem;
}
.customer-badge {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  flex-flow: column;
  display: flex;
}
.customer-logo { display: block; }
.stars-wrap {
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  flex-flow: column;
  display: flex;
  font-family: var(--font--title-family);
}
.customer-badge .is-b-s {
  font-family: var(--font--title-family) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
.stars-flex {
  grid-column-gap: 0.375rem;
  grid-row-gap: 0.375rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.stars-rating {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  display: flex;
}
.is-svg.is-star {
  width: 1.25rem;
  height: 1.1875rem;
  flex: none;
  display: flex;
}

@media screen and (max-width: 767px) {
  .hero-badge_img-wrapper { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; inset: auto auto 1.25rem; }
}
@media screen and (max-width: 479px) {
  .hero-badge_img-wrapper { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; inset: auto auto 1.25rem; }
}

/* === Testimonials platforms claim === */
.platforms-claim {
  font-family: var(--font--body-family);
  font-size: var(--body-small--font-size);
  color: var(--brown-70a);
  margin-top: 0.25rem;
}

/* === bp_list-item — only show dashed underline on items with a tooltip ===
   Webflow's base rule underlines every .bp_list-item. Live uses inline
   style="text-decoration:none" to hide it on plain items. We can't easily
   add that inline everywhere, so: hide the underline by default and only
   show it on items that actually have a tooltip (hoverable hint). */
.bp_list-item {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}
.bp_list-item:has(.tooltip) {
  text-decoration: underline dotted !important;
  -webkit-text-decoration: underline dotted !important;
  text-underline-position: under !important;
  text-decoration-color: currentColor !important;
}

/* === Pricing plan tooltips ===
   Show on hover, position below the bullet row, keep inside the card.
   Strategy: anchor the tooltip to the .bp_list (column container, card-width)
   so "50%" = half the card width. Each .tooltip is placed directly below the
   .bp_list via absolute positioning. */
.bp_list-item:hover .tooltip {
  display: flex !important;
  opacity: 1 !important;
}
/* Make the bullet-list column the positioning anchor */
.bp_list,
.bp_list.is-no-margin {
  position: relative !important;
}
/* Allow overflow on anything that could clip */
.grid_slot.is-pricing-1,
.c-pu_item,
.c-pu_btm-block,
.bp_slot,
.bp_list,
.bp_list-item {
  overflow: visible !important;
}
/* Reset and reposition the tooltip. Anchor to the nearest positioned
   ancestor (.bp_list), stretch full width of the column, then center the
   tooltip block inside. */
.tooltip {
  top: auto !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  inset: auto 0 auto 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: none !important;
  justify-content: center !important;
  align-items: flex-start !important;
  pointer-events: none !important;
  z-index: 300 !important;
}
/* Position the tooltip directly beneath the hovered item using offset-anchor
   trick: each .bp_list-item is position:relative, tooltip top:100%. */
.bp_list-item {
  position: relative !important;
}
.bp_list-item .tooltip {
  top: calc(100% + 0.5rem) !important;
  bottom: auto !important;
}
/* Tooltip box sizing */
.tooltip_block {
  min-width: 12rem !important;
  max-width: 16rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* Arrow: point UP from top-center of tooltip box */
.tooltip_arrow-wrapper {
  top: auto !important;
  bottom: 100% !important;
  left: 50% !important;
  right: auto !important;
  inset: auto auto 100% 50% !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, 50%) !important;
  justify-content: center !important;
  align-items: center !important;
}
.tooltip_arrow {
  transform: rotate(90deg) !important;
}