/* Page custom CSS replicated from nextiva.com/x/bizee-xbert-offer (page-custom-css-109680)
   by way of the Home Depot build, plus the two-column hero and lead form this page adds. */

/* Minimal WordPress core block styles the feature-image row depends on. */
.wp-block-image > a,
.wp-block-image > figure > a { display: inline-block; }
.wp-block-image img { box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom; }
.wp-block-group { box-sizing: border-box; }
.wp-container-core-group-is-layout-01921af2 { flex-wrap: nowrap; justify-content: center; }

@media (max-width: 575px) {
  .nextiva-sticky-cta-banner-block .sticky-cta-banner { width: 82%; }
  body div.choose-chat { right: -10px; }
}

body .ntb-style-nextiva-2-0 .ntb-banner__inner {
  box-shadow: 0px 0px 0px 1px #ffffff1f inset;
  background: #ffffff01;
}

/* The theme gives the stacked hero min-height:100vh and 220px of top padding, both
   sized for the copy plus the app showcase underneath it. This page drops the
   showcase, so that leaves a third of the viewport as empty sky. Capping the height
   and centring the row in what is left keeps the hero full-bleed on a laptop without
   stranding the form near the top on a tall monitor. */
.design-v2 .section-hero--stacked {
  min-height: min(100vh, 780px);
}

.design-v2 .section-hero--stacked .hero-container {
  justify-content: center;
  padding-bottom: 80px;
  padding-top: 120px;
}

/* The page is assembled from five blocks that each ship their own section-heading size,
   so the headings landed on four different scales: 68px on the audio demos and feature
   grid, 56px on the FAQ and closing CTA, and 52px on the reviews carousel. The two 68px
   headings were also larger than the 64px hero h1, which inverted the page hierarchy.
   This puts all five on the FAQ/closing-CTA curve, which two of them already used and
   which stays below the hero at every width. The curve is the one those blocks resolve
   to (56px from ~1200px up, easing to a 36px floor) rather than a fixed size, so the
   headings keep scaling on narrow viewports.
   Each selector matches the specificity of the block rule it overrides and this file
   loads last, so the blocks' own breakpoint overrides lose on source order. The feature
   grid, the closing CTA and the carousel's campaign variant all need a fourth class to
   get there. */
.design-v2 .section-xbert-audio-demos .audio-demos-title,
.design-v2 .section-visual-feature-grid .platform-showcase-header .showcase-section-title,
.design-v2 .section-social-proof-carousel .spc-title,
.design-v2 .section-social-proof-carousel .spc-title.spc-title--campaign,
.design-v2 .section-faq-accordion .faq-section-title,
.design-v2 .section-cta-hero .cta-hero-content .cta-hero-headline {
  font-size: clamp(36px, 2.85vw + 21.6px, 56px);
}

/* The campaign heading is capped at 420px, which was enough for the 52px this block
   used to render at. At the shared 56px "Loved by the trades" no longer fits and wraps
   ahead of the line break in the markup, so the cap moves up to suit. The row it sits
   in is ~1370px wide with only the rating badges opposite, so there is room to spare. */
.design-v2 .bcb-reviews .spc-head--campaign .spc-title--campaign {
  max-width: 520px;
}

/* The block hard-codes a three-column grid, so the two demos we ship leave a third of
   the row empty. Widening them to half each fills it. Scoped above 1024px because the
   block's own breakpoint already collapses the grid to one centred column below that,
   and this file loads after the block's stylesheet. */
@media (min-width: 1025px) {
  .design-v2 .section-xbert-audio-demos .audio-demos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Two-column hero ──────────────────────────────────────────────────────── */

/* The Home Depot build ran the copy full-width above an app showcase; this page drops
   the showcase and pairs the copy with the lead form instead, so the row is its own
   grid rather than a change to .hero-container. 1.15fr on the copy gives the headline
   the room it needs at 56px without squeezing the 512px form card. */
.design-v2 .section-hero .bcb-hero-split {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  width: 100%;
}

/* .hero-content--wide is centred by the stacked hero variant. In a column beside the
   form that reads as drift, so the copy goes back to flush left. */
.design-v2 .section-hero .bcb-hero-split .hero-content {
  margin: 0;
  max-width: none;
  text-align: left;
}

.design-v2 .section-hero .bcb-hero-split .hero-ctas {
  justify-content: flex-start;
}

/* The handoff keeps the hero CTA, but once the form shares the row it would be the
   same button twice at the same eye level. Above the stacking breakpoint the form is
   the CTA; below it the copy comes first and the button jumps down to the form. */
@media (min-width: 1025px) {
  .design-v2 .section-hero .bcb-hero-split .bcb-hero-ctas {
    display: none;
  }
}

.design-v2 .section-hero .bcb-lockup {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  max-width: none;
}

/* The uploaded file is the whole lockup — show mark, times sign, Nextiva wordmark —
   drawn at 3x on a 426px canvas, so this height renders it at its intended scale.
   The badge's glow and drop shadow are baked into the file. */
.design-v2 .section-hero .bcb-lockup__full {
  flex: 0 0 auto;
  height: 142px;
  width: auto;
}

@media (max-width: 640px) {
  .design-v2 .section-hero .bcb-lockup {
    gap: 12px;
  }

  .design-v2 .section-hero .bcb-lockup__full {
    height: 109px;
  }
}

/* Below this the two columns would each be too narrow for a 2-up form grid, so they
   stack in source order — copy, then form — both full width. */
@media (max-width: 1024px) {
  .design-v2 .section-hero .bcb-hero-split {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Hero lead form (ported from apps/xbert-ai-meta-ads) ──────────────────── */

/* Clears the announcement bar when the hero CTA jumps down to the form. */
.bcb-hero-split__form {
  scroll-margin-top: calc(var(--nb20-banner-offset, 0px) + 24px);
}

.bcb-form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 512px;
  padding: 32px;
  width: 100%;
}

.bcb-form__grid {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 10px;
}

.bcb-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bcb-form__field--full {
  grid-column: 1 / -1;
}

.bcb-form__label {
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bcb-form__input {
  background: #f8f8f6;
  border: 1px solid #e6e7eb;
  border-radius: 5.39px;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 0.875rem;
  height: 48px;
  padding: 0 12px;
}

.bcb-form__input::placeholder {
  color: #949494;
}

.bcb-form__submit {
  align-items: center;
  background: #0066ff;
  border: none;
  border-radius: 7.7px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 13px 13px 13px 26px;
  transition: background 0.2s ease;
  width: 100%;
}

.bcb-form__submit:hover {
  background: #0052cc;
}

.bcb-form__submit-text {
  color: #fff;
  font-size: 1.21rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

.bcb-form__submit-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  display: flex;
  flex-shrink: 0;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.bcb-form__submit-icon svg {
  fill: #fff;
  height: 21px;
  width: 21px;
}

.bcb-form__footnote {
  align-items: flex-start;
  color: #6c6967;
  display: flex;
  font-size: 0.875rem;
  gap: 8px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 16px 0 0;
}

.bcb-form__footnote i {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 1px;
}

@media (max-width: 600px) {
  .bcb-form {
    padding: 24px;
  }

  .bcb-form__grid {
    grid-template-columns: 1fr;
  }

  .bcb-form__submit-text {
    font-size: 1rem;
  }
}

/* Struck-through regular price in the floating bar's price anchor. */
.nextiva-sticky-cta-banner-block .sticky-cta-text s {
  opacity: 0.6;
  text-decoration-thickness: 2px;
}

/* ── CTA modal ────────────────────────────────────────────────────────────── */

/* Laid out after the Get a Demo modal on the nextiva.com homepage — trust panel
   left, form right — but written here rather than pulled from the theme's
   v2-get-started block, which expects a HubSpot embed and its own view.js. */
.bcb-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  /* Above the theme's announcement bar and floating CTA, which both sit in the
     thousands and are the only things that can still be on screen when this opens. */
  z-index: 100000;
}

.bcb-modal[hidden] {
  display: none;
}

.bcb-modal__backdrop {
  backdrop-filter: blur(4px);
  background: rgba(3, 6, 20, 0.7);
  inset: 0;
  position: absolute;
}

.bcb-modal__inner {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: 0.66fr 1fr;
  max-height: calc(100vh - 48px);
  max-width: 1000px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Top left over the trust panel, matching the homepage's demo modal. */
.bcb-modal__close {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.85);
  border: none;
  border-radius: 10px;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  left: 20px;
  position: absolute;
  top: 20px;
  transition: background 0.2s ease;
  width: 40px;
  z-index: 2;
}

.bcb-modal__close:hover {
  background: #fff;
}

/* Navy at the top easing into the photo at the bottom, so the quote reads against
   the mountains and the badges read against flat colour. */
.bcb-modal__trust {
  background-color: #0a1733;
  background-position: center bottom;
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 84px 28px 28px;
  position: relative;
}

.bcb-modal__trust::after {
  /* Holds flat navy through the badges, opens onto the photo for the last third,
     then closes again so the quote keeps its contrast over the bright horizon. */
  background: linear-gradient(
    180deg,
    #0a1733 0%,
    rgba(10, 23, 51, 0.95) 48%,
    rgba(10, 23, 51, 0.5) 80%,
    rgba(10, 23, 51, 0.72) 100%
  );
  content: "";
  inset: 0;
  position: absolute;
}

.bcb-modal__trust-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.bcb-modal__badge {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bcb-modal__badge-stars,
.bcb-modal__quote-stars {
  color: #fd8524;
  font-size: 0.875rem;
  letter-spacing: 2px;
  line-height: 1;
}

.bcb-modal__badge-logo {
  height: auto;
  width: 116px;
}

.bcb-modal__badge-text,
.bcb-modal__stat-label,
.bcb-modal__quote-role {
  color: hsla(0, 0%, 100%, 0.75);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.bcb-modal__stats {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.bcb-modal__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bcb-modal__stat-number {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.bcb-modal__quote {
  border-top: 1px solid hsla(0, 0%, 100%, 0.2);
  margin: 0;
  padding-top: 20px;
  position: relative;
  z-index: 1;
}

.bcb-modal__quote-text {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.bcb-modal__quote-footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bcb-modal__quote-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.bcb-modal__panel {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px;
}

/* Serif, matching the section headings the theme sets on this modal. */
.bcb-modal__title {
  color: #1a1a1a;
  font-family: var(--font-heading, var(--font-display, Georgia, serif));
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 28px;
}

/* ── Modal form (nextiva.com Get a Demo field styling) ───────────────────── */

/* Stacked full-width fields apart from the name row, white inputs on a white
   panel held by a border — the hero card's grey-filled inputs would read as
   disabled here. */
.bcb-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bcb-modal-form__row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.bcb-modal-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bcb-modal-form__label {
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.bcb-modal-form__required {
  color: #e02b2b;
  margin-left: 1px;
}

.bcb-modal-form__input {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 1rem;
  height: 52px;
  padding: 0 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.bcb-modal-form__input::placeholder {
  color: #a3a3a3;
}

.bcb-modal-form__input:focus {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
  outline: none;
}

.bcb-modal-form__submit {
  align-items: center;
  background: #0066ff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  min-height: 64px;
  padding: 12px 12px 12px 24px;
  transition: background 0.2s ease;
  width: 100%;
}

.bcb-modal-form__submit:hover {
  background: #0052cc;
}

.bcb-modal-form__submit-text {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

.bcb-modal-form__submit-icon {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 6px;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.bcb-modal-form__submit-icon svg {
  fill: #fff;
  height: 18px;
  width: 18px;
}

.bcb-modal__phone,
.bcb-modal__privacy {
  color: #6c6967;
  margin: 16px 0 0;
}

.bcb-modal__phone {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  gap: 8px;
}

.bcb-modal__phone a {
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
}

.bcb-modal__privacy {
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 12px;
}

.bcb-modal__privacy a {
  color: #6c6967;
  text-decoration: underline;
}

.bcb-modal__success {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

.bcb-modal__success[hidden] {
  display: none;
}

.bcb-modal__success-icon {
  align-items: center;
  background: #e6f0ff;
  border-radius: 50%;
  color: #0066ff;
  display: flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 20px;
  width: 56px;
}

.bcb-modal__success-icon svg {
  height: 26px;
  width: 26px;
}

.bcb-modal__success-title {
  color: #1a1a1a;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.bcb-modal__success-text {
  color: #6c6967;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}

/* The trust panel is the first thing that has to go — below this the two columns
   would leave the form too narrow to keep its 2-up field rows. */
@media (max-width: 860px) {
  .bcb-modal {
    padding: 16px;
  }

  .bcb-modal__inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 32px);
    max-width: 520px;
  }

  .bcb-modal__trust {
    display: none;
  }

  /* The close button loses its panel, so it moves onto the white form panel. */
  .bcb-modal__close {
    background: rgba(0, 0, 0, 0.06);
    left: auto;
    right: 16px;
    top: 16px;
  }

  .bcb-modal__panel {
    padding: 32px 24px;
  }

  .bcb-modal__title {
    font-size: 1.625rem;
    padding-right: 48px;
  }
}

.platform-badge {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  color: var(--text-secondary);
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding: 8px 14px;
  text-transform: uppercase;
}

.design-v2 .section-visual-feature-grid .platform-showcase-header {
  text-align: center;
  margin: 0 auto;
  max-width: unset;
}
.design-v2 .split-showcase-info-cards {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.design-v2 .split-showcase-info-cards .split-showcase-info-card {
  background: #f8f8f6;
}

@media (min-width: 862px) and (max-width: 1250px) {
  .design-v2 .split-showcase-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.design-v2 .section-cta-hero .cta-hero-headline {
  font-size: var(--text-heading-lg);
  line-height: 1.14;
}

.design-v2 .section-cta-hero {
  min-height: unset;
}

/* Struck-through regular price in the closing CTA. */
.design-v2 .section-cta-hero .cta-hero-subhead s {
  opacity: 0.6;
  text-decoration-thickness: 2px;
}

#showcase {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 32px;
  width: 100%;
  margin: 0 auto !important;
  padding: 20px 30px;
  box-sizing: border-box;
}

#showcase > .wp-block-image {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  margin: 0 !important;
}

#showcase > .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 601;
  object-fit: cover;
  border-radius: 12px;
}

/* Tablet */
@media (max-width: 1024px) {
  #showcase {
    gap: 14px;
    padding: 20px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .design-v2 .section-hero .hero-container .bcb-hero-split .hero-content {
    text-align: center;
    margin: 0 auto;
  }

  .design-v2 .section-hero .bcb-hero-split .hero-ctas,
  .design-v2 .section-hero .bcb-lockup {
    justify-content: center;
  }

  .design-v2 .section-hero .hero-description {
    font-size: 1.125rem;
  }

  .design-v2 .section-hero { min-height: auto; }

  #showcase {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    padding: 20px !important;
  }

  #showcase > .wp-block-image {
    flex: 0 0 100%;
    width: 100%;
  }
}

@media (min-width: 768px) {
  #showcase {
    padding: 60px max(100px, (100% - var(--content-max-width))/2) 100px !important;
  }
  .design-v2 .section-visual-feature-grid {
    padding: 100px max(100px, (100% - var(--content-max-width))/2) 0 !important;
  }

  .design-v2 .section-visual-feature-grid .showcase-section-title {
    color: #1a1a1a;
    text-align: center;
    font-size: 68px;
    font-style: normal;
    font-weight: 500;
    line-height: 66.64px;
    letter-spacing: -1.36px;
  }
}

.design-v2 .section-visual-feature-grid .platform-showcase-header {
  margin-bottom: 0 !important;
  max-width: unset !important;
  text-align: center;
}

.design-v2 .section-visual-feature-grid .showcase-section-title {
  margin: 0 !important;
}

@media (max-width: 640px) {
  .design-v2 .section-split-showcase,
  .design-v2 .section-visual-feature-grid {
    padding: 60px 20px 0;
  }

  .design-v2 .section-hero--stacked .hero-title {
    font-size: clamp(1.75rem, 8vw, 52px);
    margin-bottom: 32px;
  }

  .design-v2 .section-hero .hero-description {
    margin-bottom: 32px;
  }

  .design-v2 .section-cta-hero .cta-hero-headline {
    font-size: clamp(1.75rem, 7vw, 52px);
  }

  .design-v2 .section-cta-hero .cta-hero-subhead {
    font-size: 1.25rem;
  }
}

/* ── Customer reviews (v2-social-proof-carousel, campaign variant) ────────── */

/* The campaign variant ships on --bg-cream, which is also the FAQ background right
   below it, so the two sections would read as one band. #e6eafe is what the block's
   default variant uses, and it separates the white showcase above from the FAQ below. */
.design-v2 .bcb-reviews.section-social-proof-carousel {
  background: #e6eafe;
}

/* The block has no role field, so the trade/market line is ours. The campaign
   variant sets .spc-person gap to 4px, which stacks name, trade, and stars. */
.design-v2 .bcb-reviews .bcb-reviews__role {
  color: #6c6967;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 4px;
}

/* Sits in the top-right corner the block reserves for its G2 badge image. Sized by
   width because the two marks have very different proportions: G2 is a round icon and
   Capterra is a wordmark roughly 4.5x as wide as it is tall. Matching their heights
   would leave the G2 mark tiny, so each is set to the footprint the theme's own trust
   badge row gives it. */
.design-v2 .bcb-reviews .bcb-reviews__source {
  align-self: flex-start;
  flex: 0 0 auto;
  height: auto;
  margin-left: auto;
  margin-top: 2px;
  object-fit: contain;
  width: auto;
}

.design-v2 .bcb-reviews .bcb-reviews__source--g2 {
  width: 20px;
}

.design-v2 .bcb-reviews .bcb-reviews__source--capterra {
  width: 72px;
}

/* Glyphs rather than the block's stars.png, which is a fixed 5-star image. Ratings
   here vary: one reviewer left 4, and the case studies carry no rating at all. */
.design-v2 .bcb-reviews .bcb-reviews__stars {
  color: #fd8524;
  display: flex;
  font-size: 14px;
  gap: 1px;
  line-height: 1;
  margin-top: 2px;
}

.design-v2 .bcb-reviews .bcb-reviews__stars i {
  line-height: 1;
}

/* Only Lex Feldheim has a published photo, so initials keep the eight cards
   consistent rather than mixing one portrait with seven blanks. */
.design-v2 .bcb-reviews .bcb-reviews__initials {
  align-items: center;
  background: #e6eafe;
  border-radius: 50%;
  color: #0b1029;
  display: flex;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  height: 50px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 50px;
}

.design-v2 .bcb-reviews .bcb-reviews__badges {
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.design-v2 .bcb-reviews .bcb-reviews__badge {
  align-items: center;
  border-right: 1px solid #cdc7c3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 17px;
}

.design-v2 .bcb-reviews .bcb-reviews__badge:last-child {
  border-right: none;
}

.design-v2 .bcb-reviews .bcb-reviews__badge-logo {
  height: 23px;
  max-width: 88px;
  object-fit: contain;
  width: auto;
}

.design-v2 .bcb-reviews .bcb-reviews__badge-logo--g2 {
  height: 20px;
  max-width: 20px;
}

.design-v2 .bcb-reviews .bcb-reviews__badge-logo--gartner {
  height: 18px;
  max-width: 72px;
}

.design-v2 .bcb-reviews .bcb-reviews__badge-stars {
  color: #fd8524;
  font-size: 0.75rem;
  letter-spacing: 1px;
  line-height: 1;
}

.design-v2 .bcb-reviews .bcb-reviews__badge-score {
  color: #6c6967;
  font-size: 0.84rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .design-v2 .bcb-reviews .bcb-reviews__badges {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .design-v2 .bcb-reviews .bcb-reviews__badge:first-child {
    padding-left: 0;
  }
}

/* Announcement bar styling from the live page's ntb-custom-css block. */
.ntb-style-nextiva-2-0 .ntb-banner__message {
  font-size: 15px;
  letter-spacing: 0.14px;
  color: #cdc7c3;
}
.ntb-style-nextiva-2-0 .ntb-banner__message strong { color: #fff; }
.ntb-style-nextiva-2-0 .ntb-banner__close { color: #fff; }
.ntb-style-nextiva-2-0 .ntb-banner__cta { background: #ffffff2e; }

/* Theme hero uses hero-main--hubspot; prototype CSS targets .bcb-hero-split on the same row. */
body.page-xbert-podcast-offer .section-hero--hubspot-form .demo-modal-trust-line__contact,
body.page-xbert-podcast-offer .section-hero--hubspot-form .demo-modal-privacy {
  display: none;
}

/* The theme caps this row at 1200px for the receptionist layout it was built for. At
   that width the headline breaks onto a third line, so the row goes back to the
   container width the prototype gives it. */
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-main--hubspot {
  align-items: center;
  max-width: none;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-main--hubspot .hero-content {
  max-width: none;
}

/* The receptionist layout narrows the body copy to 560px; the prototype keeps the
   block's own compact width. */
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-description--compact {
  max-width: 800px;
}

/* HubSpot embed in the hero — match prototype .bcb-form card. */
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form.bcb-hero-split__form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 512px;
  padding: 32px;
  width: 100%;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .nextiva-form-v2 .hs-form-field > label {
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .nextiva-form-v2 .hs-input,
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .nextiva-form-v2 select.hs-input {
  background: #f8f8f6;
  border: 1px solid #e6e7eb;
  border-radius: 5.39px;
  font-size: 0.875rem;
  height: 48px;
  padding: 0 12px;
}

/* HubSpot wraps every field in its own fieldset, so the two-column grid has to run on
   the fieldsets rather than on .hs-form-field the way the theme's own variant does. */
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: 1fr 1fr;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset {
  margin: 0;
  max-width: none;
  min-width: 0;
  width: 100%;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset.form-columns-2,
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset:has(.hs_email),
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset:has(.hs-email),
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset:has(.hs_numberofemployees),
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset:has(.hs-numberofemployees),
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > .hs_submit,
body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > .hs_error_rollup {
  grid-column: 1 / -1;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form > fieldset .input {
  margin: 0;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .nextiva-form-v2 .hs-button {
  align-items: center;
  background: #0066ff;
  border: none;
  border-radius: 7.7px;
  display: flex;
  font-size: 1.21rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: -0.02em;
  min-height: 72px;
  padding: 13px 13px 13px 26px;
  width: 100%;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .nextiva-form-v2 .hs_submit {
  grid-column: 1 / -1;
  margin-top: 10px;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .demo-modal-trust-line {
  margin-top: 16px;
}

/* The .bcb-reviews rules above key off a class the block only prints once the theme
   update is live; these repeat the two that change the page's silhouette so the
   section still reads correctly from the body class alone. */
body.page-xbert-podcast-offer .section-social-proof-carousel {
  background: #e6eafe;
}

/* The Home Depot page custom CSS pins this heading with `width` and `flex-basis`, not
   just `max-width`, and it prints after this file. Scoping to the body class outranks
   it so the heading keeps the two-line break the markup asks for. */
body.page-xbert-podcast-offer .section-social-proof-carousel .spc-head--campaign .spc-title--campaign {
  flex: 0 1 auto;
  max-width: 520px;
  width: auto;
}

body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form .bcb-form__footnote {
  color: #6c6967;
  font-size: 0.875rem;
  gap: 8px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 600px) {
  body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form.bcb-hero-split__form {
    padding: 24px;
  }

  body.page-xbert-podcast-offer .section-hero--hubspot-form .hero-hubspot-form--two-columns .nextiva-form-v2 .hs-form {
    grid-template-columns: 1fr;
  }
}