/**
 * Become A Billboard — Tradie funnel landing page styles
 * Scoped to .billboard-page; loads AFTER landing.css (cascade order matters).
 * Bespoke --bb-* palette — not limited to ThemeProvider tokens for visible UI.
 */

/* ─── Breakpoints (mobile-first; scale up with min-width) ─── */
:where(.billboard-page) {
  --bb-bp-sm: 480px;
  --bb-bp-md: 768px;
  --bb-bp-lg: 1024px;
  --bb-bp-xl: 1250px;

  /* deep, slightly warm blacks */
  --bb-bg: #0a0a0b;
  --bb-bg-elev: #121214;
  --bb-bg-card: #16161a;
  --bb-hairline: rgba(255, 255, 255, 0.08);
  --bb-line: rgba(255, 255, 255, 0.12);
  --bb-ink: #f5f3f0;
  --bb-ink-soft: #c5c2bd;
  --bb-ink-mute: #8a8780;
  --bb-orange: #ff7a18;
  --bb-orange-hot: #ff9d2f;
  --bb-orange-deep: #e85d04;
  --bb-orange-ember: #ffba6b;
  --bb-grad: linear-gradient(135deg, #ff9d2f 0%, #ff7a18 45%, #e85d04 100%);
  --bb-grad-text: linear-gradient(100deg, #ffba6b 0%, #ff7a18 60%, #e85d04 100%);
  --bb-radius: 1.25rem;
  --bb-radius-lg: 1.75rem;
  --bb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bb-font-display: 'Space Grotesk', system-ui, sans-serif;
  --bb-font-body: 'Inter', system-ui, sans-serif;
}

/* Prevent horizontal scroll from glow blobs; mobile text sizing */
html {
  -webkit-text-size-adjust: 100%;
}

.billboard-page,
.billboard-page * {
  min-width: 0;
}

.billboard-page img,
.billboard-page svg,
.billboard-page .media-placeholder {
  max-width: 100%;
}

/* ─── Page shell ─── */
/* ⚠️ DO NOT add `overflow-x: hidden` (or any single-axis overflow) back here.
   Per the CSS overflow spec, setting only overflow-x on an element with the
   other axis left at its 'visible' default gets computed as overflow-y:
   'auto' — silently turning this element into its OWN scroll container.
   `.billboard-page` sits inside the shared `.simplified-landing-page`
   wrapper (landing.css), which already does exactly this (overflow-x:
   hidden + implicit overflow-y: auto). Stacking a second one here created
   two nested scrollable regions, so the mouse-wheel/touch scroll would
   intermittently get captured by the wrong one and stop propagating to the
   real page scroll ("double scroll container" bug). Horizontal overflow
   from the decorative glow blobs is already clipped at the `body` level
   (body { overflow-x: hidden } in landing.css), so no local clip is needed.
   See: docs/workingdocs/TROUBLESHOOTING_DEV.md */
.billboard-page {
  position: relative;
  background: var(--bb-bg);
  color: var(--bb-ink-soft);
  font-family: var(--bb-font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  /* The shared site header (.AuthHeader from header.html) is position:fixed and
     ~75px tall. landing.css only clears it for `.main-hero-section`, which this
     page doesn't use — so add the clearance here ourselves to stop the hero
     sliding underneath the header. (75px = 4.6875rem.) */
  padding-top: 4.6875rem;
}

/* Subtle grain overlay — kills flat-AI banding */
.billboard-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Tile the noise at a fixed size so it reads as fine grain, not a stretched wash */
  background-size: 200px 200px;
  background-repeat: repeat;
}

.billboard-page > * {
  position: relative;
  z-index: 2;
}

/* ─── Layout container ─── */
.bb-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 4rem);
}

/* ─── Scroll reveal ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--bb-ease),
    transform 0.6s var(--bb-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Typography ─── */
.billboard-page h1,
.billboard-page h2,
.billboard-page h3 {
  font-family: var(--bb-font-display);
  color: var(--bb-ink);
  line-height: 1.1;
}

.billboard-page h1 {
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  font-weight: 700;
}

.billboard-page h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  letter-spacing: -0.02em;
}

.billboard-page h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 500;
}

.billboard-page p {
  max-width: 60ch;
}

.billboard-page .bb-caption {
  font-size: 0.9rem;
  color: var(--bb-ink-mute);
}

/* Inline emphasis for the "SEO-ready / found on Google" selling point.
   Brand-orange + semibold so it stands out inside body copy without needing
   a separate badge. Used on <strong class="bb-seo-pop"> in the hero + steps. */
.billboard-page .bb-seo-pop {
  color: var(--bb-orange-hot);
  font-weight: 600;
}

.gradient-text {
  background: var(--bb-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.handwritten {
  font-family: 'Caveat', cursive;
  color: var(--bb-orange-ember);
  font-size: 1.35em;
}

/* ─── Eyebrow pill ─── */
.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 122, 24, 0.12);
  border: 1px solid rgba(255, 122, 24, 0.35);
  color: var(--bb-orange-hot);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-family: var(--bb-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.bb-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bb-orange);
  flex-shrink: 0;
}

/* ─── Sections ─── */
.bb-section {
  padding-block: clamp(3.5rem, 9vw, 9rem);
  border-bottom: 1px solid var(--bb-hairline);
}

.bb-section--elev {
  background: var(--bb-bg-elev);
}

.bb-section__lead {
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.bb-section__header {
  margin-bottom: 2.5rem;
}

/* Centred headers: text-align alone is not enough — .billboard-page p is
   max-width: 60ch, so without auto side margins the lead block hugs left
   while the lines look “centred” inside it (same fix as .bb-footer p). */
.bb-section__header--center {
  text-align: center;
}

.bb-section__header--center .bb-section__lead,
.bb-section__header--center h2 {
  margin-inline: auto;
}

/* ─── Glow blobs ─── */
.bb-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(255, 122, 24, 0.5) 0%, rgba(232, 93, 4, 0.14) 45%, transparent 70%);
}

@media (max-width: 767px) {
  .bb-glow {
    filter: blur(60px);
  }
}

/* ─── Cards ─── */
.bb-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), var(--bb-bg-card);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius);
  padding: 2rem;
  backdrop-filter: blur(10px);
  transition:
    transform 0.3s var(--bb-ease),
    border-color 0.3s,
    box-shadow 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .bb-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 122, 24, 0.55);
    box-shadow: 0 24px 70px rgba(255, 122, 24, 0.14);
  }
}

.bb-card:active {
  transform: translateY(-2px);
}

.bb-card--lit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bb-orange-hot), transparent);
  z-index: 4;
}

/* Cards with a photo header — flush media, padded body */
.bb-card--has-media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bb-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #121216;
}

.bb-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--bb-ease);
}

@media (hover: hover) and (pointer: fine) {
  .bb-card--has-media:hover .bb-card__media img {
    transform: scale(1.04);
  }
}

.bb-card__body {
  position: relative;
  z-index: 3;
  padding: 1.35rem 1.5rem 1.65rem;
}

.bb-card__body h3 {
  margin: 0 0 0.5rem;
}

.bb-card__body p {
  margin: 0;
}

.bb-card--pain .bb-icon-wrap {
  color: #f87171;
}

@media (hover: hover) and (pointer: fine) {
  .bb-card--pain:hover {
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 24px 70px rgba(248, 113, 113, 0.1);
  }
}

/* Big red "X" on the pain *image* only — keeps the copy readable.
   Visual shorthand for "don't waste money on these".
   Two diagonal gradient bands via ::after on .bb-card__media. */
.bb-card--pain .bb-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(
      to top right,
      transparent calc(50% - 2.5px),
      rgba(248, 113, 113, 0.55) calc(50% - 2.5px),
      rgba(248, 113, 113, 0.55) calc(50% + 2.5px),
      transparent calc(50% + 2.5px)
    ),
    linear-gradient(
      to bottom right,
      transparent calc(50% - 2.5px),
      rgba(248, 113, 113, 0.55) calc(50% - 2.5px),
      rgba(248, 113, 113, 0.55) calc(50% + 2.5px),
      transparent calc(50% + 2.5px)
    );
  /* Soften edges so the X feels stamped on the photo */
  box-shadow: inset 0 0 40px rgba(10, 10, 12, 0.35);
}

/* Soft bottom fade so the photo meets the card body cleanly */
.bb-card--has-media .bb-card__media::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 18, 22, 0.7), transparent);
}

/* ─── Buttons ───
   Primary CTAs use landing.css `.main-cta-button.button-animated` (same as `/`)
   for the center-expand hover glow. Layout-only tweaks live here. */

.bb-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Reusable centred CTA dropped into mid-page sections. The hero, pricing and
   final band aren't the only places we should prompt a signup — repeating a
   single, clear "Get Started" button down the page keeps the funnel alive as
   the visitor scrolls. Centred so it reads as a deliberate section closer. */
.bb-section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Match `/` CTA look; drop fadeInScale entrance so mid-page CTAs don't pop in
   on scroll — keep only the center-expand hover (::before in landing.css). */
.billboard-page .main-cta-button.button-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  animation: none;
  opacity: 1;
  transform: none;
}

/* landing.css expands the hover glow to 200px — too wide for mid-page CTAs.
   Cap it so the ripple stays inside the button instead of flooding past the edges. */
.billboard-page .main-cta-button.button-animated:hover::before {
  width: 7.5rem;
  height: 7.5rem;
}

@media (max-width: 767px) {
  .bb-cta-row {
    flex-direction: column;
    width: 100%;
  }

  .bb-cta-row .main-cta-button {
    width: 100%;
  }
}

/* ─── Media placeholders ─── */
.media-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: var(--bb-radius);
  border: 1.5px dashed rgba(255, 122, 24, 0.4);
  background: radial-gradient(circle at 50% 40%, rgba(255, 122, 24, 0.08), transparent 70%), var(--bb-bg-card);
  color: var(--bb-ink-mute);
  text-align: center;
  padding: 1.25rem;
  overflow: hidden;
}

.media-placeholder__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 90%;
}

.media-placeholder__icon {
  width: 28px;
  height: 28px;
  color: var(--bb-orange);
}

/* ─── Icons ─── */
.bb-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--bb-orange);
  margin-bottom: 1rem;
}

.bb-icon-wrap svg {
  width: 1.5rem;
  height: 1.5rem;
}

.bb-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bb-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  max-width: none;
}

.bb-check-list svg {
  flex-shrink: 0;
  color: var(--bb-orange);
  margin-top: 0.15rem;
}

/* ─── Funnel header (sticky, minimal) ─── */
.bb-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bb-hairline);
  height: 72px;
}

@media (max-width: 767px) {
  .bb-header {
    height: 60px;
  }
}

/* Hide wordmark on very small phones — keep logo icon */
@media (max-width: 380px) {
  .bb-header .bb-header__wordmark {
    display: none;
  }
}

.bb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem;
}

.bb-header__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bb-orange);
  text-decoration: none;
}

.bb-header__wordmark {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bb-ink);
}

.bb-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-header__signin {
  background: none;
  border: none;
  color: var(--bb-ink-mute);
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.5rem;
  min-height: 48px;
}

@media (hover: hover) and (pointer: fine) {
  .bb-header__signin:hover {
    color: var(--bb-orange-hot);
  }
}

@media (max-width: 480px) {
  .bb-header__signin {
    display: none;
  }
}

/* ─── Hero ─── */
/* Video first (order: -1), then offer. One centred composition — not a dashboard.
   Modest top gap under the fixed-header clearance (~75px on .billboard-page). */
.bb-hero.bb-section {
  position: relative;
  text-align: center;
  /* Override .bb-section's large padding-block; keep a clear breath above the video */
  padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(2rem, 5vw, 3.5rem);
}

.bb-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  justify-items: center;
}

.bb-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  line-height: 1.1;
}

/* Smaller orange lead-in — matches the mock (diff size from the main line) */
.bb-hero__kicker {
  display: block;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bb-orange-hot);
}

/* Dominant white headline */
.bb-hero__title {
  display: block;
  font-size: clamp(1.85rem, 4.6vw, 3.25rem);
  font-weight: 700;
  color: var(--bb-ink);
}

.bb-hero .bb-cta-row,
.bb-hero .bb-trust-line {
  justify-content: center;
}

.bb-hero__copy {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bb-hero__lead {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
}

/* Compact value stack — salesman · leads · AI/Google under the hero lead */
.bb-hero__stack {
  list-style: none;
  margin: 0 auto 2.15rem;
  padding: 0;
  max-width: 36rem;
  display: grid;
  gap: 0.55rem;
  text-align: left;
}

.bb-hero__stack li {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.5rem 0.85rem;
  align-items: baseline;
  padding: 0.45rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 122, 24, 0.22);
  background: rgba(255, 122, 24, 0.06);
}

.bb-hero__stack-label {
  font-family: var(--bb-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bb-orange-hot);
  letter-spacing: 0.01em;
}

.bb-hero__stack-desc {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--bb-ink-soft);
}

@media (max-width: 479px) {
  .bb-hero__stack li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Inline price punch — replaces the bulky offer box above the fold */
.bb-hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  margin: 0 0 1.35rem;
  color: var(--bb-ink);
}

.bb-hero__price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  /* Keep gap between "only" and the price cluster — not between $ / AUD / period */
  gap: 0.35rem 0.4rem;
  width: 100%;
}

.bb-hero__partner {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.bb-hero__partner-logo {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}

/* Circular crop for member referral avatars (hidden until JS sets src) */
.bb-hero__partner-logo--avatar {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.bb-hero__partner-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bb-orange-hot);
  letter-spacing: 0.02em;
}

.bb-hero__price-was {
  flex-basis: 100%;
  font-size: 0.95rem;
  color: var(--bb-ink-mute);
  text-decoration: line-through;
}

.bb-hero__price-only {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--bb-ink-soft);
  align-self: flex-end;
  margin-bottom: 0.2rem;
}

.bb-hero__price-amount {
  font-family: var(--bb-font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bb-orange-hot);
}

/* Keep $ / AUD /period as one tight unit (hero + pricing card) */
.bb-price-cluster {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0;
}

/* Quiet ISO currency — same treatment top and bottom */
.bb-currency {
  font-family: var(--bb-font-body, inherit);
  font-size: 0.7rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bb-ink-mute);
  opacity: 0.55;
  margin-left: 0.1em;
  margin-right: 0.08em;
  vertical-align: super;
  line-height: 1;
  cursor: help;
}

.bb-hero__price-period {
  font-size: 1.05rem;
  color: var(--bb-ink-soft);
  margin-left: 0.12em;
  margin-right: 0;
}

.bb-hero__price-vs {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--bb-ink-mute);
}

.bb-hero .bb-cta-row {
  margin-bottom: 0.85rem;
}

.bb-hero .bb-trust-line {
  margin-top: 0;
  gap: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

/* Done-for-you hook — visual card: large support photo + offer; whole card clickable */
.bb-dfy {
  position: relative;
  margin-top: 4.5rem;
  max-width: 40rem;
  padding: 0;
  overflow: hidden;
  border-radius: var(--bb-radius);
  border: 1px solid rgba(255, 122, 24, 0.28);
  background: linear-gradient(160deg, rgba(255, 122, 24, 0.1) 0%, rgba(22, 22, 26, 0.92) 55%);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.25s var(--bb-ease),
    box-shadow 0.25s var(--bb-ease),
    transform 0.25s var(--bb-ease),
    background 0.25s var(--bb-ease);
}

/* Invisible stretched control — keyboard + click target for the whole card */
.bb-dfy__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.bb-dfy__inner {
  position: relative;
  z-index: 1;
  pointer-events: none; /* clicks go to .bb-dfy__hit */
}

@media (hover: hover) and (pointer: fine) {
  .bb-dfy:hover,
  .bb-dfy:focus-within {
    border-color: rgba(255, 157, 47, 0.7);
    box-shadow: 0 16px 40px rgba(255, 122, 24, 0.18);
    transform: translateY(-3px);
    background: linear-gradient(160deg, rgba(255, 122, 24, 0.16) 0%, rgba(22, 22, 26, 0.95) 55%);
  }

  .bb-dfy:hover .bb-dfy__face,
  .bb-dfy:focus-within .bb-dfy__face {
    transform: scale(1.03);
  }

  .bb-dfy:hover .bb-dfy__cta,
  .bb-dfy:focus-within .bb-dfy__cta {
    color: var(--bb-orange-ember);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.bb-dfy:active {
  transform: translateY(-1px);
}

.bb-dfy__hit:focus-visible {
  outline: 2px solid var(--bb-orange-hot);
  outline-offset: 3px;
}

/* Photo leads; copy sits beside (desktop) or under (mobile) */
.bb-dfy__layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 560px) {
  .bb-dfy__layout {
    grid-template-columns: minmax(9.5rem, 42%) 1fr;
  }
}

.bb-dfy__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #1a1a1e;
}

@media (min-width: 560px) {
  .bb-dfy__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.bb-dfy__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 0.45s var(--bb-ease);
}

@media (min-width: 560px) {
  .bb-dfy__face {
    position: absolute;
    inset: 0;
  }
}

.bb-dfy__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem 1.25rem;
}

@media (min-width: 560px) {
  .bb-dfy__copy {
    padding: 1.35rem 1.4rem 1.4rem 1.25rem;
    justify-content: center;
  }
}

.bb-dfy__hook {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.5;
  color: var(--bb-ink-soft);
}

.bb-dfy__hook strong {
  color: var(--bb-ink);
  font-weight: 700;
}

.bb-dfy__price {
  margin: 0;
  font-size: 0.95rem;
  color: var(--bb-ink-soft);
  line-height: 1.45;
}

.bb-dfy__amount {
  font-family: var(--bb-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bb-orange-hot);
  margin: 0;
}

.bb-dfy__price .bb-price-cluster {
  margin: 0 0.15rem;
}

.bb-dfy__price .bb-currency {
  /* Match hero/card currency treatment inside the DFY price line */
  font-size: 0.65rem;
}

/* Soft support line under the price — not a feature list */
.bb-dfy__includes {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--bb-ink-mute);
}

.bb-dfy__vs {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--bb-ink-mute);
}

.bb-dfy__cta {
  font-weight: 700;
  font-size: 1rem;
}

.bb-trust-line__dot {
  color: var(--bb-ink-mute);
  opacity: 0.7;
}

.bb-hero p {
  margin-inline: auto;
}

.bb-hero__glow-1 {
  width: 480px;
  height: 480px;
  top: -10%;
  left: -15%;
  filter: blur(120px);
  background: radial-gradient(circle, rgba(255, 122, 24, 0.18) 0%, rgba(232, 93, 4, 0.06) 45%, transparent 70%);
}

.bb-hero__glow-2 {
  width: 420px;
  height: 420px;
  bottom: -10%;
  right: -10%;
}

@media (max-width: 767px) {
  .bb-hero__glow-1 {
    width: 260px;
    height: 260px;
    left: -20%;
    filter: blur(70px);
  }

  .bb-hero__glow-2 {
    width: 220px;
    height: 220px;
    right: -15%;
  }
}

.bb-hero__media {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  border-radius: 1.25rem;
  box-shadow: 0 24px 64px rgba(255, 144, 0, 0.16);
  /* Video first — strongest visual hook. Keep top padding tight so it isn't
     floating in empty space under the header. */
  order: -1;
}

/* ─── Hero video frame (YouTube, via shared player in landing.js) ───
   The container carries data-lazy-video + data-video-id; landing.js swaps
   in a YT.Player once it scrolls into view. aspect-ratio (set inline) keeps
   it responsive; overflow:hidden clips the player to the rounded corners.
   The `iframe` rule below is what forces the YT-API-injected iframe to fill
   the frame (the API otherwise defaults to a fixed 640×360). */
.bb-video-frame {
  position: relative;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #000; /* avoids an orange flash before the player paints */
}
.bb-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.bb-trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--bb-ink-mute);
}

.bb-trust-line svg {
  color: var(--bb-orange);
  flex-shrink: 0;
}

/* Trade icon strip below hero */
.bb-trade-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 0;
  opacity: 0.5;
  border-bottom: 1px solid var(--bb-hairline);
}

@media (max-width: 767px) {
  .bb-trade-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 1.5rem;
    padding-inline: clamp(1.1rem, 5vw, 4rem);
  }

  .bb-trade-strip::-webkit-scrollbar {
    display: none;
  }
}

.bb-trade-strip svg {
  width: 2rem;
  height: 2rem;
  color: var(--bb-ink-soft);
}

/* ─── Problem cards grid ─── */
.bb-grid-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .bb-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .bb-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ─── How it works steps ─── */
.bb-steps {
  position: relative;
  display: grid;
  gap: 2rem;
  /* Semantic <ol> for HowTo — kill browser list chrome */
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .bb-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .bb-steps::before {
    content: '';
    position: absolute;
    top: 3.5rem;
    left: 16%;
    right: 16%;
    height: 2px;
    border-top: 2px dashed rgba(255, 122, 24, 0.35);
    z-index: 0;
  }
}

.bb-step-num {
  font-family: var(--bb-font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1.5px var(--bb-orange);
  color: transparent;
  margin-bottom: 0.75rem;
}

/* ─── Value stack — salesperson working while you live ─── */
.bb-value-stack {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 40rem;
  display: grid;
  gap: 0.85rem;
  counter-reset: none;
}

.bb-value-stack__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.15rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-hairline);
  background: var(--bb-bg-card);
}

.bb-value-stack__item--closer {
  border-color: rgba(255, 122, 24, 0.35);
  background: linear-gradient(160deg, rgba(255, 122, 24, 0.1) 0%, rgba(22, 22, 26, 0.95) 55%);
}

.bb-value-stack__num {
  font-family: var(--bb-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bb-orange-hot);
  letter-spacing: 0.04em;
}

.bb-value-stack__item h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--bb-ink);
}

.bb-value-stack__item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bb-ink-soft);
}

.bb-step-card {
  position: relative;
  z-index: 1;
}

/* ─── Scan actions — copy + 2×3 tile grid left, phone mockup right ─── */
.bb-scan-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .bb-scan-layout {
    /* ~55/45 split: tiles need room; phone stays a fixed-ish column */
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 300px);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

.bb-scan-layout__copy h2 {
  margin-bottom: 0.75rem;
}

/* Tighter gap between lead and tiles — the old full-width header left dead space */
.bb-scan-layout__copy .bb-section__lead {
  margin-top: 0.75rem;
  margin-bottom: 1.75rem;
}

.bb-scan-layout__media {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (min-width: 900px) {
  .bb-scan-layout__media {
    justify-content: center;
    padding-top: 0.25rem;
  }
}

/* Mobile: headline → phone visual → action tiles (display:contents flattens the copy wrapper) */
@media (max-width: 899px) {
  .bb-scan-layout__copy {
    display: contents;
  }

  .bb-scan-layout__media {
    order: 4;
  }

  .bb-scan-layout .bb-action-grid {
    order: 5;
  }
}

/* Two-column tile grid inside the scan section (6 items → 3 rows) */
.bb-scan-layout .bb-action-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .bb-scan-layout .bb-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bb-action-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bb-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.bb-action-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--bb-bg-card);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius);
  min-height: 48px;
  transition:
    transform 0.3s var(--bb-ease),
    border-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .bb-action-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 122, 24, 0.45);
  }
}

.bb-action-tile svg {
  flex-shrink: 0;
  color: var(--bb-orange);
}

.bb-phone-frame {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
}

/* Cap phone height so the mockup doesn't tower over the action tiles */
.bb-scan-layout__media .bb-phone-frame {
  max-width: min(280px, 100%);
}

.bb-scan-layout__media .media-placeholder {
  aspect-ratio: 9 / 16;
  min-height: 320px;
  max-height: min(480px, 58vh);
}

/* ─── Asset cards (image-led) ─── */
.bb-asset-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .bb-asset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .bb-asset-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.bb-asset-card {
  padding: 0;
  overflow: hidden;
}

.bb-asset-card .media-placeholder {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--bb-hairline);
}

.bb-asset-card__body {
  padding: 1.5rem;
}

/* ─── ROI section ─── */
.bb-roi-layout {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .bb-roi-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.bb-stat-compare {
  display: grid;
  gap: 1.5rem;
}

.bb-stat {
  font-family: var(--bb-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bb-ink);
}

.bb-stat--orange {
  color: var(--bb-orange-hot);
}

.bb-stat-label {
  font-size: 1rem;
  color: var(--bb-ink-mute);
  margin-top: 0.35rem;
}

/* ─── Split text + media ─── */
.bb-split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .bb-split {
    grid-template-columns: 1fr 1fr;
  }
}

.bb-feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.bb-feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin-bottom: 1.5rem;
  max-width: none;
}

.bb-feature-list h3 {
  margin: 0;
  grid-column: 2;
}

.bb-feature-list p {
  margin: 0;
  grid-column: 2;
  font-size: 0.95rem;
}

.bb-feature-list .bb-icon-wrap {
  grid-row: span 2;
  margin: 0;
}

/* ─── Testimonials ─── */
.bb-testimonial-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .bb-testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .bb-testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.bb-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--bb-orange);
  margin-bottom: 1rem;
}

.bb-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 1rem;
  overflow: hidden;
}

.bb-testimonial-avatar .media-placeholder {
  border-radius: 50%;
  padding: 0.5rem;
  min-height: 56px;
}

.bb-testimonial-meta {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--bb-ink-mute);
}

/* Semantic quotes — keep card look without browser quote chrome */
.bb-testimonial-grid figure {
  margin: 0;
}

.bb-testimonial-grid blockquote {
  margin: 0;
}

.bb-testimonial-grid blockquote p {
  margin: 0;
}

/* ─── Pricing card ─── */
.bb-pricing-wrap {
  display: flex;
  justify-content: center;
}

.bb-pricing-card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  border-top: 3px solid var(--bb-orange);
  box-shadow: 0 24px 60px rgba(255, 122, 24, 0.12);
}

.bb-price {
  font-family: var(--bb-font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--bb-ink);
  margin: 1rem 0;
}

/* Keep the dollar amount at the card's display size; period stays quiet */
.bb-price__amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.bb-price__period {
  font-size: 1rem;
  color: var(--bb-ink-mute);
  font-weight: 400;
  margin-left: 0.12em;
}

.bb-price__was {
  display: block;
  font-size: 1rem !important;
  font-weight: 500;
  color: var(--bb-ink-mute) !important;
  text-decoration: line-through;
  margin-bottom: 0.15rem;
}

.bb-pricing-card__partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.35rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--bb-ink-soft);
}

.bb-pricing-card__partner img {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}

.bb-pricing-card__avatar {
  height: 2rem !important;
  width: 2rem !important;
  border-radius: 50%;
  object-fit: cover;
}

.bb-tick-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
}

.bb-tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  max-width: none;
  font-size: 0.95rem;
}

.bb-tick-list svg {
  flex-shrink: 0;
  color: var(--bb-orange);
  margin-top: 0.2rem;
}

/* ─── FAQ (native details) ─── */
.bb-faq {
  display: grid;
  gap: 0.75rem;
}

.bb-faq details {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--bb-bg-card);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius);
  padding: 0;
}

.bb-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--bb-ink);
  min-height: 48px;
  list-style: none;
}

.bb-faq summary::-webkit-details-marker {
  display: none;
}

.bb-faq .chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--bb-orange);
  transition: transform 0.25s var(--bb-ease);
}

.bb-faq details[open] .chevron {
  transform: rotate(180deg);
}

.bb-faq .bb-faq__answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--bb-ink-soft);
  font-size: 0.95rem;
}

.bb-faq .bb-faq__answer p {
  margin: 0;
  max-width: none;
}

/* ─── Final CTA ─── */
.bb-final-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* The closing CTA now lives inside a contained "band" so it reads as a
   deliberate, premium sign-off block instead of text floating on the page.
   A dark orange-tinted panel + soft glow draws the eye straight to the button. */
.bb-final-cta .bb-container {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid rgba(255, 122, 24, 0.28);
  border-radius: var(--bb-radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 122, 24, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(22, 22, 26, 0.92) 0%, rgba(10, 10, 11, 0.92) 100%);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1.5rem 4rem rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Thin gradient accent line across the top edge of the band. */
.bb-final-cta .bb-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--bb-orange-hot), transparent);
}

.bb-final-cta__glow {
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 180deg,
    rgba(255, 122, 24, 0.45),
    rgba(232, 93, 4, 0.15),
    rgba(255, 157, 47, 0.35),
    rgba(255, 122, 24, 0.45)
  );
  animation: bb-glow-spin 20s linear infinite;
}

@keyframes bb-glow-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-final-cta__glow {
    animation: none;
  }
}

.bb-final-cta__bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  z-index: 0;
}

.bb-final-cta h2,
.bb-final-cta p {
  margin-inline: auto;
}

/* Make the closing headline the biggest on the page — it's the final push. */
.bb-final-cta h2 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  margin-bottom: 0.6rem;
}

.bb-final-cta p {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  max-width: 36ch;
}

.bb-final-cta .bb-cta-row {
  justify-content: center;
  margin-top: 2.25rem;
}

/* Slightly larger closing-band CTA so the final push reads unmissable. */
.bb-final-cta .main-cta-button {
  padding-inline: 2.75rem;
  min-height: 3.5rem;
}

.bb-final-cta .main-cta-button .button-text {
  font-size: 1.35rem;
}

/* Final CTA is larger — give the ripple a bit more room than mid-page buttons. */
.bb-final-cta .main-cta-button.button-animated:hover::before {
  width: 10rem;
  height: 10rem;
}

/* ─── Footer ─── */
.bb-footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--bb-hairline);
  text-align: center;
  font-size: 0.875rem;
  color: var(--bb-ink-mute);
}

/* Footer paragraphs inherit the global p{max-width:60ch}; centre them so the
   capped block sits in the middle of the centred footer instead of hugging left */
.bb-footer p {
  margin-inline: auto;
}

.bb-footer__logo {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bb-ink);
  margin-bottom: 0.5rem;
}

.bb-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin: 1rem 0;
}

.bb-footer__links a {
  color: var(--bb-ink-mute);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .bb-footer__links a:hover {
    color: var(--bb-orange-hot);
  }
}

@media (max-width: 767px) {
  .bb-footer__links {
    flex-direction: column;
    align-items: center;
  }
}

/* Drop backdrop-filter on mobile for perf */
@media (max-width: 767px) {
  .bb-card,
  .bb-header {
    backdrop-filter: none;
  }
}

/* ─── Conversion deal layer (too-good-to-skip offer) ─── */

/* Room so the floating pill doesn't cover the last section on mobile */
.bb-page--deal .billboard-page {
  padding-bottom: 5rem;
}

.bb-deal-badge {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.4rem;
  max-width: min(100%, 36rem);
  margin-bottom: 1rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-family: var(--bb-font-display);
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  color: #1a0f05;
  background: var(--bb-grad);
  box-shadow: 0 0 24px rgba(255, 122, 24, 0.35);
}

.bb-deal-badge--inline {
  margin-bottom: 0.75rem;
}

/* Hero offer box — clear deal above the fold */
.bb-offer-box {
  margin: 1.25rem 0 1.5rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--bb-radius);
  border: 1px solid rgba(255, 122, 24, 0.35);
  background: linear-gradient(160deg, rgba(255, 122, 24, 0.12) 0%, rgba(22, 22, 26, 0.95) 55%);
}

.bb-offer-box__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--bb-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-orange-hot);
}

.bb-offer-box__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  margin: 0 0 0.85rem;
  color: var(--bb-ink);
}

.bb-offer-box__amount {
  font-family: var(--bb-font-display);
  font-size: clamp(2.25rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bb-orange-hot);
}

.bb-offer-box__period {
  font-size: 1rem;
  color: var(--bb-ink-soft);
}

.bb-offer-box__vs {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--bb-ink-mute);
}

.bb-offer-box__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.bb-offer-box__list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--bb-ink-soft);
  font-size: 0.95rem;
  line-height: 1.4;
}

.bb-offer-box__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--bb-orange-hot);
  font-weight: 700;
}

.bb-hero-demo-link {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--bb-ink-mute);
}

.bb-text-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--bb-orange-hot);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .bb-text-link:hover {
    color: var(--bb-orange-ember);
  }
}

/* Street + AI pipes */
.bb-pipes {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .bb-pipes {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.bb-pipe__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--bb-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bb-orange-hot);
}

.bb-pipe h3 {
  margin-bottom: 0.5rem;
}

/* Math compare layout */
.bb-math-compare {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  padding: 1.5rem 1.25rem;
}

.bb-math-compare__side {
  text-align: center;
}

/* Clear “Others” / “UseVerb” labels — centred over each column, high contrast */
.bb-math-compare__title {
  display: block;
  margin: 0 0 0.65rem;
  font-family: var(--bb-font-display);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5f5f6;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

.bb-math-compare__title--useverb {
  color: #ffb347;
  text-shadow: 0 0 28px rgba(255, 153, 0, 0.45);
}

@media (min-width: 640px) {
  .bb-math-compare {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
  }
}

.bb-math-compare__vs {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  text-align: center;
}

@media (min-width: 640px) {
  .bb-math-compare__vs {
    /* Align with the price row under the titles */
    padding-top: 2.35rem;
  }
}

/* Floating CTA — bottom-right dark card with glow border + orange price pill.
   ⚠️ DO NOT nest this under .simplified-landing-page — overflow scroll +
   .billboard-page > * { z-index: 2 } bury fixed siblings. Keep markup on <body>
   and z-index above AuthHeader (20) / mobile nav (100).
   ⚠️ Hard-code palette here — .bb-float-cta is outside :where(.billboard-page)
   so --bb-* custom properties do not inherit. */
.bb-float-cta {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
  border: 1px solid rgba(255, 157, 47, 0.55);
  border-radius: 1rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f5f3f0;
  background: #0a0a0b;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 122, 24, 0.12),
    0 0 28px rgba(255, 122, 24, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bb-float-cta__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.bb-float-cta__logo {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.bb-float-cta__logo--avatar {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
}

.bb-float-cta__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  line-height: 1.15;
  text-align: left;
}

.bb-float-cta__offer {
  font-weight: 700;
  font-size: 0.85rem;
  color: #f5f3f0;
}

.bb-float-cta__note {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8a8780;
  letter-spacing: 0.02em;
}

/* Price chip — orange pill on the dark card */
.bb-float-cta__price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ff9d2f 0%, #ff7a18 45%, #e85d04 100%);
  box-shadow: 0 4px 14px rgba(255, 122, 24, 0.35);
}

.bb-float-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 157, 47, 0.85);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 122, 24, 0.2),
    0 0 36px rgba(255, 122, 24, 0.5);
}

.bb-float-cta:focus-visible {
  outline: 2px solid #ff9d2f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bb-float-cta {
    transition: none;
  }

  .bb-float-cta:hover {
    transform: none;
  }
}

/* ─── Partner / referral offer variants ───
   Partner query URL → html.bb-offer--partner (brand/pricing via JS)
   other valid coupon/member ref → html.bb-offer--referral (Referral deal)
   Default page = geo Company Plus monthly /location. */
.bb-partner-only,
.bb-referral-only {
  display: none !important;
}

html.bb-offer--partner .bb-default-only,
html.bb-offer--referral .bb-default-only {
  display: none !important;
}

html.bb-offer--partner .bb-partner-only {
  display: block !important;
}

html.bb-offer--referral .bb-referral-only {
  display: block !important;
}

html.bb-offer--partner .bb-partner-only.bb-hero__price-block,
html.bb-offer--referral .bb-referral-only.bb-hero__price-block {
  display: flex !important;
}

html.bb-offer--partner .bb-pricing-card__partner,
html.bb-offer--referral .bb-pricing-card__partner {
  display: inline-flex !important;
}

html.bb-offer--partner .bb-float-cta > .bb-partner-only,
html.bb-offer--partner .bb-float-cta__inner--partner,
html.bb-offer--referral .bb-float-cta > .bb-referral-only,
html.bb-offer--referral .bb-float-cta__inner--referral {
  display: inline-flex !important;
}

html.bb-offer--partner p.bb-deal-badge.bb-partner-only,
html.bb-offer--referral p.bb-deal-badge.bb-referral-only {
  display: inline-flex !important;
}