/* ============================================================
   Landing hero (#hero-card)
   Figma: CPG-COURSE, node 750:7 "Frame 118" (1920px frame).
   Desktop values are the Figma measurements; every size eases down
   fluidly so the two columns never collide before they stack.

   The section keeps data-card="1": its sticky stacking comes from
   styles.css and app.js (layoutCards), so no position, transform or
   overflow is set on #hero-card itself.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@500;900&family=Big+Shoulders+Display:wght@800&display=swap");

/* ============================================================
   Shared button arrow (.bv-btn-arrow)
   One 16x16 chevron for every arrow control on the page: the header,
   hero, programs, work, fit, after-apply, recap, book and footer CTAs,
   plus the process connectors. The glyph arrows and the older 12px and
   low-precision variants are gone, so the markup is written once.

   It sizes in em off the button it sits in and paints with currentColor,
   so each button keeps its own scale and palette. Hover and keyboard
   focus slide it right; transform never reflows, so nothing shifts, and
   the slide is limited to real hover pointers so a tap on a phone or
   tablet does not leave the arrow stuck out of place.
   ============================================================ */

.bv-btn-arrow {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  a:hover .bv-btn-arrow,
  button:hover .bv-btn-arrow,
  [data-work]:hover .bv-btn-arrow {
    transform: translateX(0.25em);
  }
}

a:focus-visible .bv-btn-arrow,
button:focus-visible .bv-btn-arrow,
[data-work]:focus-visible .bv-btn-arrow {
  transform: translateX(0.25em);
}

@media (prefers-reduced-motion: reduce) {
  .bv-btn-arrow {
    transition: none;
  }

  a:hover .bv-btn-arrow,
  button:hover .bv-btn-arrow,
  [data-work]:hover .bv-btn-arrow,
  a:focus-visible .bv-btn-arrow,
  button:focus-visible .bv-btn-arrow,
  [data-work]:focus-visible .bv-btn-arrow {
    transform: none;
  }
}

/* ============================================================
   Site header
   Figma: node 754:1168 (logo, 148x78 at 77/20) and 754:2270
   "nav-actions" (339x41, 67px from the right edge) on the 1920px frame.
   The bar is 118px tall at 1920 and eases down to the original 68px.
   ============================================================ */

:root {
  --bv-header-h: clamp(68px, 6.146vw, 118px);
}

/* Fragment links clear the taller bar; 36px matches the original
   104px offset over the 68px header. */
#main, section[data-card], #qualify {
  scroll-margin-top: calc(var(--bv-header-h) + 36px);
}

.bv-header {
  --bv-header-magenta: #ea008a;
  --bv-header-magenta-hover: #c4007a;
  --bv-header-indigo: #442f91;
  --bv-header-focus: #522c90;

  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(61, 39, 136, 0),
    0 10px 28px -14px rgba(16, 12, 60, 0);
  transition:
    background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    -webkit-backdrop-filter 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    backdrop-filter 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* At the top of the page the bar sits flat on the hero. Once the page
   scrolls, app.js adds .is-stuck and the bar lifts: a hairline plus a soft
   drop keep it distinct when a white section scrolls under it. */
.bv-header.is-stuck {
  box-shadow:
    0 1px 0 rgba(61, 39, 136, 0.08),
    0 10px 28px -14px rgba(16, 12, 60, 0.22);
}

/* Frosted glass where supported: sections stay faintly visible through the
   stuck bar, so it reads as a layer above the page, not part of it. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bv-header {
    -webkit-backdrop-filter: saturate(100%) blur(0px);
    backdrop-filter: saturate(100%) blur(0px);
  }

  .bv-header.is-stuck {
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
  }
}

/* Brand accent along the bottom edge of the stuck bar, in the magenta /
   cyan / indigo of the page's tri-colour eyebrow bars. It draws out from
   the centre as the bar lifts and retracts when the page returns to top. */
.bv-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #ea008a 0%, #1cb1e3 50%, #3d2788 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition:
    opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.bv-header.is-stuck::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .bv-header,
  .bv-header::after {
    transition: none;
  }
}

.bv-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px; /* width and side padding: page container, styles.css */
  max-width: 95%;
}

.bv-header__brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.bv-header__logo {
  display: block;
  width: auto;
  height: 48px;
}

.bv-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bv-header .bv-header__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: "Big Shoulders Display", "Barlow Condensed", Barlow, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 17px; /* Figma's 41px buttons */
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bv-header .bv-header__btn:focus-visible {
  outline: 3px solid var(--bv-header-focus);
  outline-offset: 3px;
}

.bv-header .bv-header__btn--strategy {
  border-color: var(--bv-header-magenta);
  background: var(--bv-header-magenta);
  color: #ffffff;
}

.bv-header .bv-header__btn--strategy:hover {
  border-color: var(--bv-header-magenta-hover);
  background: var(--bv-header-magenta-hover);
  color: #ffffff;
}

.bv-header .bv-header__btn--qualify {
  border-color: var(--bv-header-indigo);
  background: #ffffff;
  color: var(--bv-header-indigo);
}

.bv-header .bv-header__btn--qualify:hover {
  background: var(--bv-header-indigo);
  color: #ffffff;
}

/* The dot blinks on its own so the qualifier pill reads as live. Opacity
   and scale only, inside a fixed 8px flex track, so the pill never moves. */
.bv-header__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0s infinite normal none running bvPulse;
}

/* @keyframes bvHeaderDotBlink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.3;
    transform: scale(0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-header__dot {
    animation: none;
  }
} */

/* Below 769px only the qualifier stays, as before (styles.css FIX 2);
   these selectors outrank that rule, so it is restated here. */
@media (max-width: 768px) {
  .bv-header .bv-header__btn--strategy {
    display: none;
  }

  .bv-header .bv-header__btn--qualify {
    padding: 9px 14px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .bv-header .bv-header__btn--qualify {
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

#hero-card {
  --bv-hero-ink: #1f1f21;
  --bv-hero-indigo: #3d2788;
  --bv-hero-magenta: #ea008a;
  --bv-hero-magenta-hover: #c4007a;
  --bv-hero-violet: #522c90;
  --bv-hero-violet-hover: #421f61;
  --bv-hero-lavender: #d2c2fc;
  --bv-hero-lilac: #f0eaff;
  --bv-hero-body: #555555;
  --bv-hero-strong: #1d161d;
  --bv-hero-reveal: 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both bvFadeUp;

  top: 0;
  box-sizing: border-box;
  background: #ffffff;
  padding-block: clamp(32px, 3.1vw, 59px) clamp(32px, 2.5vw, 48px);
  font-family: Barlow, sans-serif;
}

#hero-card .bv-hero__grid,
#hero-card .bv-hero__grid *,
#hero-card .bv-hero__grid *::before,
#hero-card .bv-hero__grid *::after {
  box-sizing: border-box;
}

/* ---- layout ------------------------------------------------------------ */

/* Width, centring and side padding come from the page container in
   styles.css. Both columns share a top edge and grow with the container. */
#hero-card .bv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--bv-space-16);
}

#hero-card .bv-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding-top: 29px; /* Figma eyebrow slot */
  margin-bottom: clamp(0px, 1.67vw, 32px); /* Figma sits the copy slightly above center */
}

#hero-card .bv-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ---- headline ---------------------------------------------------------- */

#hero-card .bv-hero__title {
  margin: 0;
  padding-block: 0.139em;
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(44px, 4.746vw, 91.12px);
  font-weight: 800;
  line-height: 0.9185;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bv-hero-ink);
  animation: var(--bv-hero-reveal);
}

/* Narrow measure breaks the first sentence after "JUST", as in Figma,
   without splitting the sentence in the markup. */
#hero-card .bv-hero__title-lead {
  display: block;
  max-width: 6.7em;
}

#hero-card .bv-hero__title-accent {
  display: block;
  color: var(--bv-hero-indigo);
}

/* ---- details + CTA ----------------------------------------------------- */

#hero-card .bv-hero__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

#hero-card .bv-hero__price {
  font-size: clamp(18px, 1.285vw, 24.667px);
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  color: var(--bv-hero-magenta);
  animation: var(--bv-hero-reveal);
  animation-delay: 60ms;
}

#hero-card .bv-hero__intro {
  margin: 0;
  font-size: clamp(16px, 1.028vw, 19.733px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--bv-hero-body);
  animation: var(--bv-hero-reveal);
  animation-delay: 100ms;
}

#hero-card .bv-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  max-width: 100%;
  padding: 18px 32px;
  border-radius: 32px;
  background: var(--bv-hero-magenta);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: var(--bv-hero-reveal);
  animation-delay: 260ms;
}

#hero-card .bv-hero__cta:hover {
  background: var(--bv-hero-magenta-hover);
  color: #ffffff;
}

#hero-card .bv-hero__cta:focus-visible,
#hero-card .bv-hero__qualify-btn:focus-visible {
  outline: 3px solid var(--bv-hero-violet);
  outline-offset: 3px;
}

/* ---- media ------------------------------------------------------------- */

#hero-card .bv-hero__media-wrap {
  position: relative;
  animation: var(--bv-hero-reveal);
  animation-delay: 160ms;
}

#hero-card .bv-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 30px;
  background: #0b0813;
}

#hero-card .bv-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0b0813;
  object-fit: cover;
}

/* Figma crops the poster's dark top and bottom bands. Native controls
   appear once playback starts, so the zoom drops away with them. */
#hero-card .bv-hero__video:not([controls]) {
  transform: scale(1.1);
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hovering the poster pushes the crop in a little further. The reveal
   animation owns `transform` on the wrappers, so hover zooms use the
   independent `scale` property and never fight it. */
@media (hover: hover) and (pointer: fine) {
  #hero-card .bv-hero__media:hover .bv-hero__video:not([controls]) {
    transform: scale(1.18);
  }
}

/* Curved "Launch your brand faster" callout, drawn concentric with the
   media's top-left corner. Box and path scale with the media width. */
#hero-card .bv-hero__arc {
  position: absolute;
  z-index: 2;
  top: 0;
  left: -7.547%;
  margin-top: -7.547%; /* 40/530 of the media width, whatever its height */
  width: 86.79%;
  height: auto;
  aspect-ratio: 460 / 340;
  overflow: visible;
  pointer-events: none;
}

#hero-card .bv-hero__arc-text {
  font-family: Barlow, sans-serif;
  font-size: 32px;
  font-weight: 400;
  text-transform: uppercase;
  fill: var(--bv-hero-magenta);
}

#hero-card .bv-hero__arc g {
    transform: translate(0px, 110px);
}


/* Play ribbon. app.js adds .bv-hero-play and .bv-hero-play__icon, whose
   styles.css rules carry !important; the marked declarations below are
   the only ones that need it to win. */
/* The poster carries a testimonial quote across its middle and the 25+ /
   $250M+ stats along its lower left, so the pill sits in the bottom-right
   corner instead of over the centre. */
#hero-card .bv-hero__play {
  position: absolute;
  right: var(--bv-space-3);
  bottom: var(--bv-space-3);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 24px);
  padding: 8px 24px 8px 8px;
  border: 0;
  border-radius: 100px;
  background: var(--bv-hero-magenta);
  color: #ffffff;
  box-shadow: none !important; /* beats .bv-hero-play */
  pointer-events: none;
}

#hero-card .bv-hero__play-icon {
  display: block;
  flex: 0 0 36px;
  width: 36px !important; /* beats .bv-hero-play__icon */
  height: 36px !important; /* beats .bv-hero-play__icon */
  background: none !important; /* beats .bv-hero-play__icon */
  color: #ffffff;
}

#hero-card .bv-hero__play-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#hero-card .bv-hero__play .bv-hero-play__label {
  overflow: hidden;
  color: #ffffff;
  font-family: Barlow, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#hero-card .bv-hero-video-frame:focus-visible {
  outline: 3px solid var(--bv-hero-violet);
  outline-offset: 4px;
}

/* ---- qualification card ------------------------------------------------ */

#hero-card .bv-hero__qualify {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: clamp(24px, 1.67vw, 32px);
  border: 1.5px solid var(--bv-hero-lavender);
  border-radius: 20px;
  background: #ffffff;
  filter: drop-shadow(0 10px 12px rgba(82, 44, 144, 0.06));
  transition: scale 280ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 280ms ease, border-color 280ms ease;
  animation: var(--bv-hero-reveal);
  animation-delay: 240ms;
}

@media (hover: hover) and (pointer: fine) {
  #hero-card .bv-hero__qualify:hover {
    border-color: var(--bv-hero-violet);
    filter: drop-shadow(0 18px 24px rgba(82, 44, 144, 0.16));
    scale: 1.02;
  }
}

#hero-card .bv-hero__badge {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bv-hero-lilac);
  color: var(--bv-hero-violet);
  font-size: 12px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

#hero-card .bv-hero__qualify-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#hero-card .bv-hero__qualify-title {
  color: var(--bv-hero-strong);
  font-size: clamp(22px, 1.46vw, 28px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

#hero-card .bv-hero__qualify-text {
  color: var(--bv-hero-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

#hero-card .bv-hero__qualify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 16px 20px;
  border-radius: 56px;
  background: var(--bv-hero-violet);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: bvPulse 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

#hero-card .bv-hero__qualify-btn:hover {
  background: var(--bv-hero-violet-hover);
  color: #ffffff;
}

#hero-card .bv-hero__proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  line-height: normal;
}

#hero-card .bv-hero__proof-lead {
  color: var(--bv-hero-strong);
  font-size: 13px;
  font-weight: 500;
}

#hero-card .bv-hero__proof-sub {
  color: var(--bv-hero-body);
  font-size: 12px;
  font-weight: 400;
}

/* ---- industries bar -----------------------------------------------------
   Figma: node 750:45 "bottom-categories-container" (1770px bar at 1920).
   Every dimension is in em off the bar's font size, so the whole bar scales
   as one unit. From 1100px up it is the static Figma bar; below that the
   eight categories cannot share one line, so the bar reuses the original
   bvMarquee scroll with a cloned set for a seamless loop. */

#hero-card .bv-industries {
  --bv-industries-line: #e5e5e5;
  --bv-industries-icon: #442f91;

  box-sizing: border-box;
  margin-top: clamp(24px, 2.4vw, 46px); /* width: page container, styles.css */
  animation: var(--bv-hero-reveal);
  animation-delay: 320ms;
}

#hero-card .bv-industries *,
#hero-card .bv-industries *::before,
#hero-card .bv-industries *::after {
  box-sizing: border-box;
}

#hero-card .bv-industries__bar {
  overflow: hidden;
  padding: 0.4em; /* 9.304px */
  border: max(1px, 0.05em) solid var(--bv-industries-line); /* 1.163px */
  border-radius: 0.8em; /* 18.607px */
  background: #ffffff;
  font-size: clamp(13px, 1.2114vw, 23.259px);
}

#hero-card .bv-industries__track {
  display: flex;
}

#hero-card .bv-industries__set {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
}

#hero-card .bv-industries__set--clone,
#hero-card .bv-industries__set > .bv-industries__divider:last-child {
  display: none;
}

#hero-card .bv-industries__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4em; /* 9.304px */
  padding: 0.6em 0.8em; /* 13.955px 18.607px */
  white-space: nowrap;
}

#hero-card .bv-industries__icon {
  display: block;
  flex: 0 0 auto;
  width: 1.5em; /* 34.888px */
  height: 1.5em;
  color: var(--bv-industries-icon);
}

#hero-card .bv-industries__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

#hero-card .bv-industries__label {
  color: var(--bv-hero-strong);
  font-family: Barlow, sans-serif;
  font-size: 1em;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

#hero-card .bv-industries__divider {
  flex: 0 0 auto;
  width: max(1px, 0.05em);
  height: 1.6em; /* 37.214px */
  background: var(--bv-industries-line);
}

/* Hover zooms the icon and label together; the bar's 0.4em padding
   absorbs the growth, so nothing is clipped or reflows. */
#hero-card .bv-industries__item {
  transition: scale 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#hero-card .bv-industries__icon,
#hero-card .bv-industries__label {
  transition: color 240ms ease, scale 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  #hero-card .bv-industries__item:hover {
    scale: 1.06;
  }

  #hero-card .bv-industries__item:hover .bv-industries__icon {
    color: var(--bv-hero-magenta);
    scale: 1.15;
  }

  #hero-card .bv-industries__item:hover .bv-industries__label {
    color: var(--bv-hero-magenta);
  }
}

/* ---- desktop: two columns inside the page container ----------------------
   From 1100px (the page-wide desktop breakpoint) the hero is two columns.
   The right column (video + qualification card) holds 480-595px and the
   headline column takes the rest, so from 1440px up every size is fixed and
   below that only widths ease down. Components keep their token sizes at
   every desktop width; nothing scales with the viewport height. */

@media (min-width: 1100px) {
  #hero-card {
    padding-block: clamp(var(--bv-space-16), 5vw, var(--bv-space-20));
  }

  #hero-card .bv-hero__grid {
    grid-template-columns: minmax(0, 1fr) clamp(480px, 46%, 595px);
  }

  /* Headline, details and CTA share the column's left edge and measure. */
  #hero-card .bv-hero__content {
    padding-top: 0;
    margin-bottom: 0;
  }

  /* Sized so the longest line ("We Build Businesses.", about 8.3em) fills
     the headline column: 58px at 1100, 80px from 1440 up. */
  #hero-card .bv-hero__title {
    font-size: clamp(var(--bv-text-h1), calc(6.3vw - 11.5px), 80px);
    text-wrap: balance;
  }

  #hero-card .bv-hero__title-lead {
    max-width: none;
  }

  #hero-card .bv-hero__price {
    font-size: var(--bv-text-h3);
  }

  #hero-card .bv-hero__intro {
    font-size: var(--bv-text-lead);
  }

  #hero-card .bv-hero__qualify {
    padding: var(--bv-space-8);
  }

  #hero-card .bv-hero__qualify-title {
    font-size: 28px;
  }

  #hero-card .bv-industries {
    margin-top: var(--bv-space-12);
  }

  /* The bar is sized in em. All eight categories need about 73em with
     dividers, so the font follows the container width: 13.8px at 1100,
     18px from 1440 up. */
  #hero-card .bv-industries__bar {
    font-size: clamp(13px, calc((100vw - 64px) / 75), 18px);
  }
}

/* ---- tablet + phone: single column ------------------------------------- */

@media (max-width: 1099px) {
  #hero-card .bv-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(40px, 6vw, 64px);
  }

  #hero-card .bv-hero__content {
    padding-top: 0;
  }

  #hero-card .bv-hero__title {
    font-size: clamp(30px, 9.6vw, 76px);
  }

  #hero-card .bv-hero__price {
    font-size: clamp(18px, 3vw, 24px);
  }

  /* Room on the left and top for the curved callout, which sits outside
     the media box, so it never meets the viewport edge. */
  #hero-card .bv-hero__aside {
    justify-self: center;
    width: min(100%, 560px);
    padding: 7% 0 0 9%;
  }

  #hero-card .bv-hero__qualify-title {
    font-size: clamp(22px, 4.2vw, 28px);
  }

  /* Industries: continuous marquee. Each set carries its own trailing
     spacing so translateX(-50%) lands exactly on the clone. */
  #hero-card .bv-industries__bar {
    font-size: clamp(14px, 2.1vw, 18px);
  }

  #hero-card .bv-industries__track {
    width: max-content;
    animation: bvMarquee 22s linear infinite;
  }

  #hero-card .bv-industries__set {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0.6em;
    padding-right: 0.6em;
  }

  #hero-card .bv-industries__set--clone {
    display: flex;
  }

  #hero-card .bv-industries__set > .bv-industries__divider:last-child {
    display: block;
  }
}

/* Without motion the marquee would freeze on the first few categories, so
   the bar becomes a swipeable row instead. */
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  #hero-card .bv-industries__bar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #hero-card .bv-industries__set--clone {
    display: none;
  }
}

@media (max-width: 480px) {
  #hero-card .bv-hero__cta {
    width: 100%;
    padding-inline: 24px;
    text-align: center;
    white-space: normal;
  }

  #hero-card .bv-hero__qualify {
    padding: 24px 20px;
  }

  #hero-card .bv-hero__play {
    gap: 8px;
    padding: 6px 16px 6px 6px;
  }

  #hero-card .bv-hero__play-icon {
    flex-basis: 30px;
    width: 30px !important; /* beats .bv-hero-play__icon */
    height: 30px !important; /* beats .bv-hero-play__icon */
  }

  #hero-card .bv-hero__play .bv-hero-play__label {
    font-size: 12px;
  }

  #hero-card .bv-hero__qualify-btn {
    padding-inline: 16px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  #hero-card .bv-hero__play .bv-hero-play__label {
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }
}

/* ============================================================
   Book strategy-session section (#cta.bv-book-cta)
   Figma: node 750:89 (white card, 1687x902 at 1920) on Rectangle 457
   (#ece6fc band) plus node 750:1125 (book scene + bestseller badge).
   Measurements are Figma pixels at 1920; --bv-book-u scales them with the
   viewport width and every value keeps a readable floor.

   The section keeps data-card="1" for the sticky stack. Element classes
   avoid the older .bv-book-cta__shell/__copy/__media/... hooks in
   styles.css; only the audit-governed __book and __badge images keep their
   names, and they are re-styled here with a more specific selector.
   ============================================================ */

#cta.bv-book-cta {
  --bv-book-u: min(1px, 100vw / 1920);
  --bv-book-indigo: #3d2788;
  --bv-book-indigo-hover: #2f1e6b;
  --bv-book-pink: #e9067e;
  --bv-book-magenta: #ea008a;
  --bv-book-cyan: #1cb1e3;
  --bv-book-ink: #150d22;
  --bv-book-muted: #5c4f6e;
  --bv-book-line: #e2e2e2;
  --bv-book-tint: #f6f3fc;

  top: 0;
  box-sizing: border-box;
  background: #ece6fc;
  font-family: Barlow, sans-serif;
}

/* styles.css pads this section with !important (desktop and <=768px);
   this more specific selector is the only way to replace it. */
section#cta.bv-book-cta {
  padding-block: clamp(40px, calc(105 * var(--bv-book-u)), 105px) !important;
  padding-inline: clamp(16px, 4vw, 40px) !important;
}

#cta .bv-book-cta__card,
#cta .bv-book-cta__card *,
#cta .bv-book-cta__card *::before,
#cta .bv-book-cta__card *::after {
  box-sizing: border-box;
}

#cta .bv-book-cta__card {
  max-width: 1634px;
  margin-inline: auto;
  padding:
    clamp(28px, calc(62 * var(--bv-book-u)), 62px)
    clamp(20px, calc(80 * var(--bv-book-u)), 80px)
    clamp(24px, calc(63 * var(--bv-book-u)), 63px);
  border-radius: clamp(24px, calc(50 * var(--bv-book-u)), 50px);
  background: #ffffff;
}

#cta .bv-book-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, calc(544 * var(--bv-book-u)), 544px);
  align-items: start;
  column-gap: clamp(32px, calc(80 * var(--bv-book-u)), 80px);
}

/* ---- copy -------------------------------------------------------------- */

#cta .bv-book-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

#cta .bv-book-cta__eyebrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#cta .bv-book-cta__kicker {
  margin: 0;
  color: var(--bv-book-indigo);
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#cta .bv-book-cta__bars {
  display: flex;
  gap: 4px;
}

#cta .bv-book-cta__bars > span {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--bv-book-magenta);
}

#cta .bv-book-cta__bars > span:nth-child(2) {
  background: var(--bv-book-cyan);
}

#cta .bv-book-cta__bars > span:nth-child(3) {
  background: var(--bv-book-indigo);
}

#cta .bv-book-cta__title {
  margin: clamp(20px, calc(32 * var(--bv-book-u)), 32px) 0 0;
  color: var(--bv-book-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(44px, calc(72 * var(--bv-book-u)), 72px);
  font-weight: 800;
  line-height: 0.9583; /* 69px on 72px */
  letter-spacing: 0;
  text-transform: uppercase;
}

#cta .bv-book-cta__title-accent {
  color: var(--bv-book-pink);
}

#cta .bv-book-cta__lead {
  max-width: 562px;
  margin: 16px 0 0;
  color: var(--bv-book-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

#cta .bv-book-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

#cta .bv-book-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 18px 36px;
  border-radius: 100px;
  background: var(--bv-book-indigo);
  color: #ffffff;
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  filter: drop-shadow(0 8px 8px rgba(61, 39, 136, 0.2));
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: bvPulse 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

#cta .bv-book-cta__button:hover {
  background: var(--bv-book-indigo-hover);
  color: #ffffff;
}

#cta .bv-book-cta__button:focus-visible {
  outline: 3px solid var(--bv-book-indigo);
  outline-offset: 3px;
}

#cta .bv-book-cta__note {
  margin: 0;
  color: var(--bv-book-muted);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

/* ---- session topics ---------------------------------------------------- */

#cta .bv-book-cta__topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 270.73px));
  gap: 10px clamp(16px, calc(30.5 * var(--bv-book-u)), 30.5px);
  width: 100%;
  margin: clamp(20px, calc(26 * var(--bv-book-u)), 26px) 0 0;
  padding: 0;
  list-style: none;
}

#cta .bv-book-cta__topic {
  display: flex;
  align-items: center;
  gap: 16.7px;
  min-width: 0;
  min-height: 83.3px;
  padding: 12px 16px 12px 22.2px;
  border: 1px solid var(--bv-book-line);
  border-radius: 13.88px;
  background: #ffffff;
}

#cta .bv-book-cta__topic-icon {
  display: flex;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 11.1px;
  background: var(--bv-book-tint);
  color: var(--bv-book-indigo);
}

#cta .bv-book-cta__topic-icon > svg {
  display: block;
  width: 27.77px;
  height: 27.77px;
}

#cta .bv-book-cta__topic-text {
  display: flex;
  flex-direction: column;
  gap: 2.78px;
  min-width: 0;
  line-height: normal;
  text-transform: uppercase;
}

#cta .bv-book-cta__topic-title {
  color: var(--bv-book-ink);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(16px, calc(19.437 * var(--bv-book-u)), 19.437px);
  font-weight: 700;
}

#cta .bv-book-cta__topic-sub {
  color: var(--bv-book-muted);
  font-size: clamp(13px, calc(15.272 * var(--bv-book-u)), 15.272px);
  font-weight: 500;
}

#cta .bv-book-cta__topic {
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

#cta .bv-book-cta__topic-icon {
  transition: background-color 220ms ease, color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #cta .bv-book-cta__topic:hover {
    border-color: var(--bv-book-magenta);
    box-shadow: 0 10px 20px rgba(234, 0, 138, 0.08);
  }

  #cta .bv-book-cta__topic:hover .bv-book-cta__topic-icon {
    background: #ffe8f5;
    color: var(--bv-book-magenta);
  }

  #cta .bv-book-cta__topic:hover .bv-book-cta__topic-icon > svg {
    animation: bvIconPop 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@keyframes bvIconPop {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.2) rotate(-10deg); }
  65% { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---- book scene + founder ---------------------------------------------- */

#cta .bv-book-cta__visual {
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-width: 0;
}

#cta .bv-book-cta__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 544 / 517;
  overflow: hidden;
  border-radius: 25px;
  background: #cdb89c;
}

#cta .bv-book-cta__picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* Out-specifies the older #cta .bv-book-cta__book / __badge rules, including
   their responsive static-position variants. */
#cta .bv-book-cta__scene .bv-book-cta__book {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}

/* The badge PNG has transparent margins (art spans x46-358, y22-304 of 400)
   and a "BY" strip from y334. The box is sized so the art is Figma's 197px
   wide at 544 and clipped at y318, just above that strip. */
#cta .bv-book-cta__scene .bv-book-cta__badge {
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 3.69%;
  left: -1.46%;
  display: block;
  width: 46.28%;
  height: auto;
  aspect-ratio: 400 / 318;
  margin: 0;
  object-fit: cover;
  object-position: top center;
}

#cta .bv-book-cta__profile {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 113px;
  padding: 16px 20px 16px 29px;
  border: 1px solid #dedede;
  border-radius: 20px;
  background: #ffffff;
}

#cta .bv-book-cta__avatar {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  background: #4fc7ee;
}

#cta .bv-book-cta__avatar > img {
  position: absolute;
  top: 0%;
  left: -2.16%;
  display: block;
  width: 100%;
  height: 120%;
  object-fit: contain;
  object-position: center top;
}

#cta .bv-book-cta__profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: normal;
}

#cta .bv-book-cta__name {
  margin-bottom: 4px;
  color: var(--bv-book-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

#cta .bv-book-cta__role {
  color: var(--bv-book-muted);
  font-size: 14px;
  font-weight: 500;
}

/* ---- proof metrics ----------------------------------------------------- */

#cta .bv-book-cta__metrics {
  --bv-book-metric-gap: clamp(16px, calc(35.43 * var(--bv-book-u)), 35.43px);

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--bv-book-metric-gap);
  row-gap: 24px;
  min-height: clamp(96px, calc(115 * var(--bv-book-u)), 115px);
  margin: 15px 0 0;
  padding: clamp(16px, calc(21 * var(--bv-book-u)), 21px) clamp(8px, calc(12 * var(--bv-book-u)), 12px);
  border-radius: clamp(20px, calc(30 * var(--bv-book-u)), 30px);
  background: #e8f9ff;
  list-style: none;
}

#cta .bv-book-cta__metric {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

#cta .bv-book-cta__metric + .bv-book-cta__metric::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--bv-book-metric-gap) / -2);
  width: 1.107px;
  height: 44.29px;
  background: #e8e2fa;
  transform: translateY(-50%);
}

/* Tabular figures keep each value's width steady while app.js counts it
   up from zero (data-count-up). */
#cta .bv-book-cta__metric-value {
  color: var(--bv-book-indigo);
  font-size: clamp(28px, calc(40 * var(--bv-book-u)), 40px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.2;
}

#cta .bv-book-cta__metric-label {
  color: var(--bv-book-muted);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(13px, calc(16 * var(--bv-book-u)), 16px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---- tablet: one column, wide book scene ------------------------------- */

@media (max-width: 1099px) {
  #cta .bv-book-cta__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  #cta .bv-book-cta__topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }

  #cta .bv-book-cta__scene {
    aspect-ratio: 16 / 10;
  }

  #cta .bv-book-cta__scene .bv-book-cta__badge {
    width: 30%;
  }

  #cta .bv-book-cta__profile {
    max-width: 544px;
  }

  #cta .bv-book-cta__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
  }

  #cta .bv-book-cta__metric:nth-child(3n + 1)::before {
    display: none;
  }
}

/* ---- phone ------------------------------------------------------------- */

@media (max-width: 699px) {
  #cta .bv-book-cta__title {
    font-size: clamp(34px, 10.5vw, 48px);
  }

  #cta .bv-book-cta__topic-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #cta .bv-book-cta__scene {
    aspect-ratio: 544 / 517;
  }

  #cta .bv-book-cta__scene .bv-book-cta__badge {
    width: 46.28%;
  }

  #cta .bv-book-cta__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #cta .bv-book-cta__metric:nth-child(3n + 1)::before {
    display: block;
  }

  #cta .bv-book-cta__metric:nth-child(2n + 1)::before {
    display: none;
  }
}

@media (max-width: 480px) {
  #cta .bv-book-cta__action {
    align-items: stretch;
  }

  #cta .bv-book-cta__button {
    width: 100%;
    padding-inline: 24px;
  }

  #cta .bv-book-cta__topic {
    padding-left: 16px;
  }

  #cta .bv-book-cta__profile {
    gap: 14px;
    padding: 16px;
  }

  #cta .bv-book-cta__avatar {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }

  #cta .bv-book-cta__metric-value {
    font-size: clamp(22px, 7vw, 28px);
  }
}

/* ============================================================
   Majors logo strip (#majors.bv-majors)
   Figma: node 750:88, a flattened 1920x403 image below the book CTA
   (1770px card at 1920). Logos are cropped from that export into
   assets/images/logos/majors/ with the card colour keyed out to transparency.
   Measurements are Figma pixels at 1920; --bv-majors-u scales them.

   The section sits between #cta and #incubator without data-card: the
   audit fixes the sticky stack at twelve cards, so this band scrolls in
   normal flow over the pinned CTA and #incubator stacks over it. It
   borrows the card leading edge so that hand-off looks like the others.
   From 1100px up it is the static Figma row, and from 1440px it also shows
   the mockup's trailing repeat PepsiCo mark (decorative, aria-hidden);
   below 1100px six logos cannot share one line, so the row becomes a
   bvMarquee loop over a cloned set. Crops are lossless PNG from the
   original 1667x350 image fill.
   ============================================================ */

#majors.bv-majors {
  --bv-majors-u: clamp(0.6px, 100vw / 1920, 1px);
  --bv-majors-bg: #f6f4f2;
  --bv-majors-card: #f8f6f4;
  --bv-majors-line: #dcd8d6;
  --bv-majors-rule: #d7d4d4;
  --bv-majors-text: #5a5966;
  --bv-majors-dot: #6b6875;

  position: relative;
  box-sizing: border-box;
  padding-block:
    clamp(40px, calc(80 * var(--bv-majors-u)), 80px)
    clamp(56px, calc(106 * var(--bv-majors-u)), 106px);
  padding-inline: clamp(16px, 4vw, 75px);
  border-radius: 28px 28px 0 0;
  background: var(--bv-majors-bg);
  box-shadow: 0 -24px 48px rgba(11, 8, 19, 0.14);
  font-family: Barlow, sans-serif;
}

.bv-majors p.bv-incubator__eyebrow {
    display: table;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 10px;
    color: #2e217f;
    font-size: clamp(12px, calc(16 * var(--bv-inc-u)), 16px);
    font-weight: 700;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
}

#majors .bv-majors__card,
#majors .bv-majors__card *,
#majors .bv-majors__card *::before,
#majors .bv-majors__card *::after {
  box-sizing: border-box;
}

#majors .bv-majors__card {
  max-width: 1770px;
  margin-inline: auto;
  padding:
    clamp(20px, calc(43 * var(--bv-majors-u)), 43px)
    clamp(16px, calc(46 * var(--bv-majors-u)), 46px)
    clamp(16px, calc(23 * var(--bv-majors-u)), 23px);
  border: 1px solid var(--bv-majors-line);
  border-radius: clamp(14px, calc(19 * var(--bv-majors-u)), 19px);
  background: var(--bv-majors-card);
  box-shadow: 0 8px 24px rgba(21, 13, 34, 0.07);
}

/* ---- eyebrow ----------------------------------------------------------- */

#majors .bv-majors__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, calc(29 * var(--bv-majors-u)), 29px);
  margin: 0;
  color: var(--bv-majors-text);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(13px, calc(22 * var(--bv-majors-u)), 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-wrap: balance;
  text-align: center;
  text-transform: uppercase;
}

/* Tracking trails the last letter; pull it back so the rules sit evenly. */
#majors .bv-majors__eyebrow-text {
  margin-right: -0.16em;
}

#majors .bv-majors__rule {
  position: relative;
  flex: 0 0 auto;
  width: clamp(24px, calc(56 * var(--bv-majors-u)), 56px);
  height: 1px;
  background: var(--bv-majors-rule);
}

#majors .bv-majors__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bv-majors-dot);
  transform: translateY(-50%);
}

#majors .bv-majors__rule--end::after {
  right: auto;
  left: 0;
}

/* ---- logo row ---------------------------------------------------------- */

#majors .bv-majors__viewport {
  margin-top: clamp(12px, calc(17 * var(--bv-majors-u)), 17px);
  overflow: hidden;
}

#majors .bv-majors__track {
  display: flex;
}

#majors .bv-majors__set {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: calc(111 * var(--bv-majors-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

#majors .bv-majors__set--clone {
  display: none;
}

#majors .bv-majors__item {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding-inline: calc(20 * var(--bv-majors-u));
}

/* Figma spaces the row like space-between with each divider centred in its
   gap. Middle items grow one unit (split around the logo); the end items
   grow half a unit on their inner side only, so the outer logos meet the
   card padding and every logo-to-divider gap is equal. */
#majors .bv-majors__item:first-child {
  flex-grow: 0.5;
  justify-content: flex-start;
  padding-left: 0;
}

#majors .bv-majors__item:nth-child(6) {
  flex-grow: 0.5;
  justify-content: flex-end;
  padding-right: 0;
}

#majors .bv-majors__item--repeat {
  display: none;
}

@media (min-width: 1440px) {
  #majors .bv-majors__item:nth-child(6) {
    flex-grow: 1;
    justify-content: center;
    padding-right: calc(20 * var(--bv-majors-u));
  }

  #majors .bv-majors__item--repeat {
    display: flex;
    flex-grow: 0.5;
    justify-content: flex-end;
    padding-right: 0;
  }
}

#majors .bv-majors__item + .bv-majors__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: max(40px, calc(69 * var(--bv-majors-u)));
  background: var(--bv-majors-line);
  transform: translateY(-50%);
}

/* Heights are each crop's Figma height at 1920, so every mark keeps the
   mockup's optical size relative to the others. */
#majors .bv-majors__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: calc(var(--bv-majors-logo-h) * var(--bv-majors-u));
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Zoomed logos may grow past the row's height, so the viewport clips
   sideways only (the marquee still needs that) and lets them breathe. */
#majors .bv-majors__viewport {
  overflow-x: clip;
  overflow-y: visible;
}

@media (hover: hover) and (pointer: fine) {
  #majors .bv-majors__item:hover .bv-majors__logo {
    transform: scale(1.15);
  }
}

#majors .bv-majors__logo--pepsico { --bv-majors-logo-h: 58.7; }
#majors .bv-majors__logo--coca-cola { --bv-majors-logo-h: 61; }
#majors .bv-majors__logo--disney { --bv-majors-logo-h: 86.4; }
#majors .bv-majors__logo--starbucks { --bv-majors-logo-h: 86.4; }
#majors .bv-majors__logo--anheuser-busch { --bv-majors-logo-h: 110.6; }
#majors .bv-majors__logo--nestle { --bv-majors-logo-h: 59.9; }

/* ---- tablet + phone: continuous marquee -------------------------------- */

@media (max-width: 1099px) {
  #majors.bv-majors {
    --bv-majors-u: 0.6px;
  }

  #majors .bv-majors__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  #majors .bv-majors__track {
    width: max-content;
    animation: bvMarquee 26s linear infinite;
  }

  #majors .bv-majors__viewport:hover .bv-majors__track {
    animation-play-state: paused;
  }

  /* Every item, including each set's first, carries its divider so
     translateX(-50%) lands exactly on the clone. */
  #majors .bv-majors__set {
    flex: 0 0 auto;
  }

  #majors .bv-majors__set--clone {
    display: flex;
  }

  #majors .bv-majors__item,
  #majors .bv-majors__item:first-child,
  #majors .bv-majors__item:nth-child(6) {
    flex: 0 0 auto;
    justify-content: center;
    padding-inline: 28px;
  }

  #majors .bv-majors__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 40px;
    background: var(--bv-majors-line);
    transform: translateY(-50%);
  }
}

/* Without motion the marquee would freeze on the first few logos, so the
   row becomes a swipeable strip instead. */
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  #majors .bv-majors__viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #majors .bv-majors__set--clone {
    display: none;
  }
}

@media (max-width: 480px) {
  #majors.bv-majors {
    --bv-majors-u: 0.5px;
  }

  #majors .bv-majors__eyebrow {
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  #majors .bv-majors__eyebrow-text {
    margin-right: -0.1em;
  }

  #majors .bv-majors__rule {
    width: 16px;
  }

  #majors .bv-majors__item,
  #majors .bv-majors__item:first-child,
  #majors .bv-majors__item:nth-child(6) {
    padding-inline: 20px;
  }

  #majors .bv-majors__item::before {
    height: 32px;
  }
}

/* The eyebrow cannot share a line with its rules this narrow. */
@media (max-width: 379px) {
  #majors .bv-majors__rule {
    display: none;
  }
}

/* ============================================================
   Incubator section (#incubator.bv-incubator)
   Figma: Rectangle 471 (750:161, #ebf6fc, 1920x1209) with the eyebrow
   frame 750:196, the retailer stripe 750:433 + cards 750:434 (rotated
   5.75deg), the video image 750:432 (801x500) and copy-container 750:162.
   Measurements are Figma pixels at 1920; --bv-inc-u scales them.

   The section keeps data-card="1" for the sticky stack, and #video,
   #brand-video and #brand-play for app.js wirePlayer(). The stripe track
   keeps its inline bvMarquee animation because scripts/static-audit.mjs
   counts the original scrolling banners; everything else is styled here.
   Retailer logos are the repo's assets/images/logos/retailers/ files, in list items so
   the older styles.css chip rules (> div > span) no longer match. The
   poster is a clean image; #brand-play draws the PLAY VIDEO pill on top of it
   and app.js shows it again whenever the film is paused.
   ============================================================ */

#incubator.bv-incubator {
  --bv-inc-u: min(1px, 100vw / 1920);
  --bv-inc-navy: #100c3c;
  --bv-inc-pink: #e9067e;
  --bv-inc-purple: #4b369d;
  --bv-inc-body: #4f5e7b;
  --bv-inc-stripe: #2a1b6c;

  box-sizing: border-box;
  top: 0;
  overflow: hidden;
  padding-block:
    clamp(48px, calc(98 * var(--bv-inc-u)), 98px)
    clamp(56px, calc(148 * var(--bv-inc-u)), 148px);
  padding-inline: 0;
  background: #ebf6fc;
  font-family: Barlow, sans-serif;
}

#incubator .bv-incubator__eyebrow,
#incubator .bv-incubator__band,
#incubator .bv-incubator__main,
#incubator .bv-incubator__main * {
  box-sizing: border-box;
}

/* ---- eyebrow ----------------------------------------------------------- */

#incubator .bv-incubator__eyebrow {
  display: table;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 10px;
  background: #edf8fe;
  color: #2e217f;
  font-size: clamp(12px, calc(16 * var(--bv-inc-u)), 16px);
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
}

/* ---- retailer stripe ----------------------------------------------------
   Beverage mockup (756:2830): the stripe runs level (0.28deg in Figma, so
   its rise is negligible), 36px below the eyebrow. The mockup's 190px gap
   down to the video read as empty space, so the band reserves nothing under
   the stripe and .bv-incubator__main's 36px margin (plus the video's 20px
   desktop offset) sets the gap, roughly matching the space above. */

#incubator .bv-incubator__band {
  --bv-inc-stripe-h: max(96px, calc(150 * var(--bv-inc-u)));
  --bv-inc-stripe-above: max(20px, calc(36 * var(--bv-inc-u)));

  position: relative;
  height: calc(var(--bv-inc-stripe-above) + var(--bv-inc-stripe-h));
}

#incubator .bv-incubator__stripe {
  position: absolute;
  top: calc(var(--bv-inc-stripe-above) + var(--bv-inc-stripe-h) / 2);
  left: 50%;
  display: flex;
  align-items: center;
  width: 112%;
  height: var(--bv-inc-stripe-h);
  overflow: hidden;
  background: var(--bv-inc-stripe);
  transform: translate(-50%, -50%) rotate(0.28deg);
}

#incubator .bv-incubator__track {
  display: flex;
  width: max-content;
}

/* Each set carries its trailing gap so translateX(-50%) lands on the clone. */
#incubator .bv-incubator__retailers {
  --bv-inc-card-gap: max(48px, calc(100 * var(--bv-inc-u)));

  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--bv-inc-card-gap);
  margin: 0;
  padding: 0 var(--bv-inc-card-gap) 0 0;
  list-style: none;
}

#incubator .bv-incubator__retailer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: max(6px, calc(8 * var(--bv-inc-u)));
  width: max(calc(var(--bv-inc-card-w) * 0.62px), calc(var(--bv-inc-card-w) * var(--bv-inc-u)));
  height: max(44px, calc(69 * var(--bv-inc-u)));
  border-radius: max(8px, calc(10 * var(--bv-inc-u)));
  background: #ffffff;
}

#incubator .bv-incubator__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: 86%;
  height: max(calc(var(--bv-inc-logo-h) * 0.62px), calc(var(--bv-inc-logo-h) * var(--bv-inc-u)));
  object-fit: contain;
}

/* Card widths and logo heights are the Figma cards and marks at 1920. */
#incubator .bv-incubator__retailer--walmart { --bv-inc-card-w: 189; --bv-inc-logo-h: 35; }
#incubator .bv-incubator__retailer--publix { --bv-inc-card-w: 176; --bv-inc-logo-h: 28; }
#incubator .bv-incubator__retailer--cvs { --bv-inc-card-w: 175; --bv-inc-logo-h: 18; }
#incubator .bv-incubator__retailer--sprouts { --bv-inc-card-w: 175; --bv-inc-logo-h: 32; }
#incubator .bv-incubator__retailer--kroger { --bv-inc-card-w: 154.5; --bv-inc-logo-h: 60; }
#incubator .bv-incubator__retailer--seven-eleven { --bv-inc-card-w: 154.5; --bv-inc-logo-h: 56; }
#incubator .bv-incubator__retailer--whole-foods { --bv-inc-card-w: 154.5; --bv-inc-logo-h: 64; }
#incubator .bv-incubator__retailer--costco { --bv-inc-card-w: 184; --bv-inc-logo-h: 48; }

#incubator .bv-incubator__wordmark {
  color: #24352a;
  font-size: max(15px, calc(24 * var(--bv-inc-u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ---- video + copy ------------------------------------------------------- */

#incubator .bv-incubator__main {
  display: grid;
  grid-template-columns: minmax(0, 801fr) minmax(0, 840fr);
  align-items: start;
  column-gap: calc(79 * var(--bv-inc-u));
  margin-top: clamp(20px, calc(36 * var(--bv-inc-u)), 36px);
  padding-inline: calc(121 * var(--bv-inc-u)) calc(80 * var(--bv-inc-u));
}

#incubator .bv-incubator__video {
  position: relative;
  width: 100%;
  margin-top: calc(20 * var(--bv-inc-u));
  aspect-ratio: 801 / 500;
  overflow: hidden;
  border-radius: 16px;
  background: #0f0f20;
  container-type: inline-size;
}

#incubator .bv-incubator__player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f0f20;
  object-fit: contain;
}

#incubator .bv-incubator__play {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Paused mid-film: dim the frozen frame so the resume pill reads clearly. */
#incubator .bv-incubator__video.is-paused .bv-incubator__play {
  background: rgba(16, 12, 60, 0.45);
  backdrop-filter: blur(2px);
}

/* PLAY VIDEO pill: centred in the frame, sized off the frame width. */
#incubator .bv-incubator__play-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.6cqi, 20px);
  box-sizing: border-box;
  height: clamp(40px, 11.6cqi, 92px);
  padding: clamp(4px, 1cqi, 8px) clamp(16px, 5cqi, 40px) clamp(4px, 1cqi, 8px) clamp(4px, 1cqi, 8px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(90deg, #a94be6 0%, #7a2fd0 45%, #3f1f93 100%);
  box-shadow:
    0 0 0 clamp(2px, 0.6cqi, 5px) rgba(214, 170, 255, 0.35),
    0 clamp(6px, 2cqi, 16px) clamp(18px, 5cqi, 40px) rgba(75, 30, 160, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#incubator .bv-incubator__play-icon {
  display: grid;
  place-items: center;
  flex: none;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5cb8 0%, #f0198f 45%, #d4046f 100%);
  box-shadow: 0 0 clamp(8px, 2.5cqi, 20px) rgba(255, 60, 170, 0.6);
}

/* The triangle path is already optically centred in its 24px box. */
#incubator .bv-incubator__play-icon svg {
  display: block;
  width: 44%;
  height: 44%;
}

#incubator .bv-incubator__play-label {
  font-family: Barlow, sans-serif;
  font-size: clamp(12px, 2.9cqi, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#incubator .bv-incubator__video:hover .bv-incubator__play-pill,
#incubator .bv-incubator__video:focus-visible .bv-incubator__play-pill {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow:
    0 0 0 clamp(2px, 0.6cqi, 5px) rgba(233, 6, 126, 0.55),
    0 clamp(6px, 2cqi, 16px) clamp(22px, 6cqi, 48px) rgba(233, 6, 126, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  #incubator .bv-incubator__play-pill {
    transition: none;
  }

  #incubator .bv-incubator__video:hover .bv-incubator__play-pill,
  #incubator .bv-incubator__video:focus-visible .bv-incubator__play-pill {
    transform: translate(-50%, -50%);
  }
}

#incubator .bv-incubator__video:focus-visible {
  outline: 3px solid var(--bv-inc-purple);
  outline-offset: 4px;
}

#incubator .bv-incubator__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

#incubator .bv-incubator__kicker {
  margin: 0;
  color: var(--bv-inc-pink);
  font-size: clamp(14px, calc(16 * var(--bv-inc-u)), 16px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#incubator .bv-incubator__title {
  margin: 12px 0 0;
  color: var(--bv-inc-navy);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(40px, calc(72 * var(--bv-inc-u)), 72px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

#incubator .bv-incubator__title-accent {
  color: var(--bv-inc-pink);
}

#incubator .bv-incubator__lead {
  max-width: 740px;
  margin: 12px 0 0;
  color: var(--bv-inc-body);
  font-size: clamp(17px, calc(22 * var(--bv-inc-u)), 22px);
  font-weight: 400;
  line-height: 24px;
}

#incubator .bv-incubator__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

#incubator .bv-incubator__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  min-height: 182px;
  padding: clamp(16px, calc(24 * var(--bv-inc-u)), 24px);
  border: 1px solid #e2edf7;
  border-radius: 12px;
  background: #ffffff;
  filter: drop-shadow(0 8px 8px rgba(16, 12, 60, 0.03));
}

#incubator .bv-incubator__card-icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #f0ecfb;
  color: var(--bv-inc-purple);
}

#incubator .bv-incubator__card-icon > svg {
  display: block;
  width: 20px;
  height: 20px;
}

#incubator .bv-incubator__card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#incubator .bv-incubator__card-title {
  color: var(--bv-inc-purple);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
}

#incubator .bv-incubator__card-desc {
  color: var(--bv-inc-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* Hover turns the title and icon magenta while the glyph slides out to the
   left and back in from the right, clipped by its round chip. */
#incubator .bv-incubator__card {
  transition: border-color 220ms ease;
}

#incubator .bv-incubator__card-icon {
  overflow: hidden;
  transition: background-color 220ms ease, color 220ms ease;
}

#incubator .bv-incubator__card-title {
  transition: color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #incubator .bv-incubator__card:hover {
    border-color: #f7c2e1;
  }

  #incubator .bv-incubator__card:hover .bv-incubator__card-icon {
    background: #ffe8f5;
    color: #ea008a;
  }

  #incubator .bv-incubator__card:hover .bv-incubator__card-icon > svg {
    animation: bvIconSlideLeft 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #incubator .bv-incubator__card:hover .bv-incubator__card-title {
    color: #ea008a;
  }
}

@keyframes bvIconSlideLeft {
  0% { opacity: 1; transform: translateX(0); }
  45% { opacity: 0; transform: translateX(-24px); }
  46% { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---- laptop: two columns, cards 2x2 ------------------------------------ */

@media (max-width: 1439px) {
  #incubator .bv-incubator__lead {
    line-height: 1.5;
  }

  #incubator .bv-incubator__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #incubator .bv-incubator__card {
    min-height: 0;
  }
}

/* ---- tablet + phone: video above copy ---------------------------------- */

@media (max-width: 1099px) {
  #incubator .bv-incubator__main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 40px;
    padding-inline: clamp(16px, 4vw, 40px);
  }

  #incubator .bv-incubator__video {
    max-width: 801px;
    margin-top: 0;
  }

  #incubator .bv-incubator__copy {
    width: 100%;
    max-width: 801px;
  }

  #incubator .bv-incubator__title {
    font-size: clamp(36px, 7vw, 60px);
  }

  #incubator .bv-incubator__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  #incubator .bv-incubator__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  #incubator .bv-incubator__title {
    font-size: clamp(34px, 10.5vw, 44px);
  }

  #incubator .bv-incubator__lead {
    font-size: 16px;
  }

  #incubator .bv-incubator__video {
    border-radius: 12px;
  }
}

@media (max-width: 359px) {
  #incubator .bv-incubator__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Programs section (#programs.bv-programs)
   Figma: pricing-section 750:198 (1920 wide, #f9f9f9) with the "360"
   watermark 750:199, header-section 750:201, pricing-grid 750:206 and
   bottom-cards-row 750:405. Measurements are Figma pixels at 1920;
   --bv-prog-u scales them.

   The section keeps data-card="1" for the sticky stack. Prices keep the
   bv-price markup and the three bv-discount-note spans keep the inline
   weight/colour that scripts/static-audit.mjs matches; the note is not in
   the mockup, so it sits quietly under each price. The mockup's duration
   rows carry opacity-0 chevrons, so they are plain labels, not accordions.
   The old data-bp="programs" hooks are gone, which retires the styles.css
   dark-card rules keyed on them.
   ============================================================ */

#programs.bv-programs {
  --bv-prog-u: min(1px, 100vw / 1920);
  --bv-prog-ink: #231b54;
  --bv-prog-indigo: #2a1b6c;
  --bv-prog-heading: #3d2788;
  --bv-prog-pink: #ea008a;
  --bv-prog-pink-text: #e9067e;
  --bv-prog-blue: #1cb1e3;
  --bv-prog-slate: #64748b;
  --bv-prog-line: #e2e8f0;
  --bv-prog-lilac: #f5f3ff;
  --bv-prog-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M16.349 7.5a7.5 7.5 0 1 1-3.6-5M6.75 8.25 9 10.5l7.5-7.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bv-prog-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.333 1.666V5M2.5 8.333h15M6.667 1.666V5m7.5 6.667h-5M10.833 15h-5m0-3.333h.008M14.167 15h.008M4.167 3.333h11.666c.92 0 1.667.746 1.667 1.667v11.667c0 .92-.746 1.667-1.667 1.667H4.167c-.92 0-1.667-.747-1.667-1.667V5c0-.92.746-1.667 1.667-1.667Z' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  box-sizing: border-box;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, calc(48 * var(--bv-prog-u)), 48px);
  padding-block:
    clamp(44px, calc(64 * var(--bv-prog-u)), 64px)
    clamp(56px, calc(80 * var(--bv-prog-u)), 80px);
  padding-inline: clamp(16px, calc(96 * var(--bv-prog-u)), 96px);
  background: #f9f9f9;
  color: var(--bv-prog-ink);
  font-family: Barlow, sans-serif;
}

#programs.bv-programs *,
#programs.bv-programs *::before,
#programs.bv-programs *::after {
  box-sizing: border-box;
}

#programs .bv-programs__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- "360" watermark, top right -----------------------------------------
   Barlow Bold Italic is not self-hosted and a synthesized bold doubles the
   outline, so the glyphs are the outlines exported from Figma node 750:200,
   drawn with its 1px stroke. */

#programs .bv-programs__watermark {
  position: absolute;
  top: calc(56 * var(--bv-prog-u));
  right: calc(67 * var(--bv-prog-u));
  z-index: 0;
  width: calc(436 * var(--bv-prog-u));
  height: auto;
  overflow: visible;
  pointer-events: none;
}

#programs .bv-programs__watermark path {
  stroke: rgba(28, 177, 227, 0.17);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

#programs .bv-programs__header,
#programs .bv-programs__grid,
#programs .bv-programs__extras {
  position: relative;
  z-index: 1;
}

/* ---- header ------------------------------------------------------------ */

#programs .bv-programs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, calc(16 * var(--bv-prog-u)), 16px);
  width: 100%;
  text-align: center;
}

#programs .bv-programs__eyebrow {
  margin: 0;
  color: var(--bv-prog-pink-text);
  font-size: clamp(13px, calc(16 * var(--bv-prog-u)), 16px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#programs .bv-programs__title {
  margin: 0;
  color: var(--bv-prog-heading);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(34px, calc(72 * var(--bv-prog-u)), 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  text-wrap: balance;
}

#programs .bv-programs__title-accent {
  color: var(--bv-prog-pink-text);
}

#programs .bv-programs__terms {
  margin: 0;
  padding: 8px clamp(16px, calc(24 * var(--bv-prog-u)), 24px);
  border-radius: 100px;
  background: var(--bv-prog-lilac);
  color: var(--bv-prog-indigo);
  font-size: clamp(13px, calc(22 * var(--bv-prog-u)), 22px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

/* ---- program cards ----------------------------------------------------- */

#programs .bv-programs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, calc(24 * var(--bv-prog-u)), 24px);
  align-items: stretch;
  width: 100%;
  max-width: 1634px;
}

#programs .bv-programs__card {
  --bv-prog-accent: var(--bv-prog-pink);
  --bv-prog-accent-hover: #c4007a;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--bv-prog-accent);
  border-radius: 24px;
  background: var(--bv-prog-accent);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
  color: #fff;
}

#programs .bv-programs__card--popular {
  --bv-prog-accent: var(--bv-prog-indigo);
  --bv-prog-accent-hover: #1c1150;

  border-width: 3px;
  box-shadow: 0 16px 32px rgba(42, 27, 108, 0.1);
}

#programs .bv-programs__card--full {
  --bv-prog-accent: var(--bv-prog-blue);
  --bv-prog-accent-hover: #1597c3;
}

#programs .bv-programs__badge {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 6px 28px;
  border: 2.5px solid #fff;
  border-radius: 999px;
  background: var(--bv-prog-indigo);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

#programs .bv-programs__card-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, calc(32 * var(--bv-prog-u)), 32px);
  padding-bottom: clamp(20px, calc(24 * var(--bv-prog-u)), 24px);
}

#programs .bv-programs__card--popular .bv-programs__card-top {
  padding-bottom: clamp(18px, calc(21 * var(--bv-prog-u)), 21px);
}

#programs .bv-programs__card-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Figma sets each 50px glyph inside a 32px box, so it spills past it. */
#programs .bv-programs__card-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(28px, calc(32 * var(--bv-prog-u)), 32px);
  height: clamp(28px, calc(32 * var(--bv-prog-u)), 32px);
  margin-left: 9px;
}

#programs .bv-programs__card-icon svg {
  flex: 0 0 auto;
  width: clamp(42px, calc(50 * var(--bv-prog-u)), 50px);
  height: clamp(42px, calc(50 * var(--bv-prog-u)), 50px);
  color: #fff;
}

#programs .bv-programs__card-names {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-left: 6px;
  text-transform: uppercase;
}

#programs .bv-programs__card-kicker {
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  opacity: 0.9;
}

#programs .bv-programs__card-title {
  margin: 0;
  color: #fff;
  font-family: Barlow, sans-serif;
  font-size: clamp(18px, calc(20 * var(--bv-prog-u)), 20px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

#programs .bv-programs__card-desc {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.9;
}

/* ---- white panel ------------------------------------------------------- */

#programs .bv-programs__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0 clamp(8px, calc(10 * var(--bv-prog-u)), 10px) clamp(8px, calc(10 * var(--bv-prog-u)), 10px);
  padding:
    clamp(24px, calc(37 * var(--bv-prog-u)), 37px)
    clamp(16px, calc(23 * var(--bv-prog-u)), 23px)
    clamp(24px, calc(55 * var(--bv-prog-u)), 55px);
  border-radius: clamp(16px, calc(25 * var(--bv-prog-u)), 25px);
  background: #fff;
  color: var(--bv-prog-ink);
}

#programs .bv-programs__card--popular .bv-programs__panel {
  margin: 0 clamp(4px, calc(6 * var(--bv-prog-u)), 6px) clamp(4px, calc(6 * var(--bv-prog-u)), 6px);
  padding-inline: clamp(18px, calc(27 * var(--bv-prog-u)), 27px);
  border-radius: clamp(14px, calc(15 * var(--bv-prog-u)), 15px);
}

#programs .bv-programs__pricing {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#programs .bv-programs__price.bv-price {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 12px;
  line-height: normal;
}

#programs .bv-programs__price .bv-price__discount {
  color: var(--bv-prog-accent);
  font-size: clamp(32px, calc(40 * var(--bv-prog-u)), 40px);
  font-weight: 800;
  letter-spacing: 0;
}

#programs .bv-programs__price .bv-price__regular {
  color: var(--bv-prog-slate);
  font-size: clamp(17px, calc(20 * var(--bv-prog-u)), 20px);
  font-weight: 600;
  text-decoration-thickness: from-font;
  opacity: 0.6;
}

#programs .bv-programs__pricing .bv-discount-note {
  font-size: 12px;
  line-height: 1.3;
}

#programs .bv-programs__duration {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(20px, calc(24 * var(--bv-prog-u)), 24px) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--bv-prog-line);
  border-radius: 12px;
  color: var(--bv-prog-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#programs .bv-programs__card--popular .bv-programs__duration {
  border-color: var(--bv-prog-lilac);
  background: var(--bv-prog-lilac);
}

#programs .bv-programs__duration::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--bv-prog-accent);
  -webkit-mask: var(--bv-prog-calendar) center / contain no-repeat;
  mask: var(--bv-prog-calendar) center / contain no-repeat;
}

#programs .bv-programs__features {
  display: grid;
  /* Two columns as in Figma, one when the panel is too narrow for that. */
  grid-template-columns: repeat(auto-fit, minmax(max(150px, 40%), 1fr));
  gap: 12px 16px;
  margin: 18px 0 clamp(24px, calc(38 * var(--bv-prog-u)), 38px);
  padding: 0 8px;
  list-style: none;
}

#programs .bv-programs__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--bv-prog-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

#programs .bv-programs__features li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: var(--bv-prog-indigo);
  -webkit-mask: var(--bv-prog-check) center / contain no-repeat;
  mask: var(--bv-prog-check) center / contain no-repeat;
}

#programs .bv-programs__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: auto;
  padding: 14px 24px;
  border-radius: 50px;
  background: var(--bv-prog-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 140ms ease;
}

#programs .bv-programs__cta:hover {
  background: var(--bv-prog-accent-hover);
  color: #fff;
}

/* Side by side, the cards share one set of row tracks (subgrid), so every
   white panel, price, duration pill, feature list and CTA starts at the
   same height whatever each card's copy length or border width. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1100px) {
    #programs .bv-programs__grid {
      grid-template-rows: repeat(5, auto);
      row-gap: 0;
    }

    #programs .bv-programs__card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    #programs .bv-programs__panel {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    #programs .bv-programs__pricing,
    #programs .bv-programs__duration,
    #programs .bv-programs__features,
    #programs .bv-programs__cta {
      align-self: start;
    }

    #programs .bv-programs__cta {
      margin-top: 0;
    }
  }
}

#programs .bv-programs__cta:focus-visible,
#programs .bv-programs__extra-link:focus-visible {
  outline: 3px solid var(--bv-prog-indigo);
  outline-offset: 3px;
}

/* ---- bottom cards ------------------------------------------------------ */

#programs .bv-programs__extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, calc(24 * var(--bv-prog-u)), 24px);
  width: 100%;
  max-width: 1634px;
}

#programs .bv-programs__extra {
  --bv-prog-accent: var(--bv-prog-pink);

  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, calc(24 * var(--bv-prog-u)), 24px);
  min-width: 0;
  padding: clamp(20px, calc(32 * var(--bv-prog-u)), 32px);
  border: 0.5px solid var(--bv-prog-accent);
  border-radius: 20px;
  background: #fff1f6;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

#programs .bv-programs__extra--growth {
  --bv-prog-accent: var(--bv-prog-blue);

  background: #f0f9ff;
}

#programs .bv-programs__extra:hover {
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

#programs .bv-programs__extra-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 4px rgba(234, 0, 138, 0.1);
  color: var(--bv-prog-accent);
}

#programs .bv-programs__extra--growth .bv-programs__extra-icon {
  box-shadow: 0 4px 4px rgba(28, 177, 227, 0.1);
}

#programs .bv-programs__extra-icon svg {
  width: 28px;
  height: 28px;
}

#programs .bv-programs__extra-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#programs .bv-programs__extra-kicker {
  margin: 0;
  color: var(--bv-prog-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#programs .bv-programs__extra-title {
  margin: 0;
  color: var(--bv-prog-ink);
  font-family: Barlow, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

#programs .bv-programs__extra-desc {
  margin: 0;
  color: var(--bv-prog-slate);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* The arrow is the link; its ::after stretches over the whole card. */
#programs .bv-programs__extra-link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 3px rgba(15, 23, 42, 0.1);
  color: var(--bv-prog-accent);
  transition: background-color 140ms ease, color 140ms ease;
}

#programs .bv-programs__extra-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

#programs .bv-programs__extra:hover .bv-programs__extra-link {
  background: var(--bv-prog-accent);
  color: #fff;
}

/* Icon-only button: the arrow keeps the mockup's 16px instead of tracking
   a label's font size. The ::after overlay makes the whole card the
   anchor's hit area, so the shared a:hover slide fires on card hover. */
#programs .bv-programs__extra-link .bv-btn-arrow {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #programs .bv-programs__extra,
  #programs .bv-programs__extra-link,
  #programs .bv-programs__cta {
    transition: none;
  }

  #programs .bv-programs__extra:hover {
    transform: none;
  }
}

/* ---- tablet + phone ---------------------------------------------------- */

@media (max-width: 1099px) {
  #programs .bv-programs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    max-width: 620px;
  }

  #programs .bv-programs__extras {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
  }

  #programs .bv-programs__watermark {
    top: 16px;
    right: 16px;
    width: clamp(150px, 34vw, 300px);
  }
}

@media (max-width: 480px) {
  #programs .bv-programs__card-top {
    gap: 12px;
    padding: 24px 20px 18px;
  }

  #programs .bv-programs__card-heading {
    gap: 12px;
  }

  #programs .bv-programs__badge {
    padding-inline: 20px;
    font-size: 13px;
  }

  #programs .bv-programs__duration {
    padding-inline: 12px;
  }

  /* Icon and arrow share the top row so the copy keeps the full width. */
  #programs .bv-programs__extra {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
  }

  #programs .bv-programs__extra-text {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  #programs .bv-programs__extra-link {
    grid-row: 1;
    grid-column: 3;
  }
}

/* ============================================================
   Lower sections: #process, #work, #testimonials, #fit, #after-apply,
   #faq, #decks and #recap. Figma frames 750:444, 750:552, 750:5
   (+ 750:820/823), 750:878, 750:1078, 750:927, the decks header 750:966 +
   grid 750:972 and the recap 750:1026 inside page frame 750:4.
   Measurements are Figma pixels at 1920; --bv-low-u scales them.

   Every section keeps data-card="1" for the sticky stack. Behaviour hooks
   stay as app.js expects: [data-work] cards with an <img> for the lightbox,
   [data-motion-src] buttons with a <video> and [data-motion-status] for the
   deck previews, five native <details> for the FAQ, and the entry-intent
   CTAs. data-bp="apply-card" stays on the first After-apply card because
   the audit requires that seam (styles.css pads it at <=768px).
   ============================================================ */

#process.bv-process,
#work.bv-work,
#testimonials.bv-testimonials,
#fit.bv-fit,
#after-apply.bv-after,
#faq.bv-faq,
#decks.bv-decks,
#recap.bv-recap {
  --bv-low-u: min(1px, 100vw / 1920);
  --bv-low-indigo: #3d2788;
  --bv-low-pink: #e9067e;

  box-sizing: border-box;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  font-family: Barlow, sans-serif;
}

#process.bv-process *,
#process.bv-process *::before,
#process.bv-process *::after,
#work.bv-work *,
#work.bv-work *::before,
#work.bv-work *::after,
#testimonials.bv-testimonials *,
#testimonials.bv-testimonials *::before,
#testimonials.bv-testimonials *::after,
#fit.bv-fit *,
#fit.bv-fit *::before,
#fit.bv-fit *::after,
#after-apply.bv-after *,
#after-apply.bv-after *::before,
#after-apply.bv-after *::after,
#faq.bv-faq *,
#faq.bv-faq *::before,
#faq.bv-faq *::after,
#decks.bv-decks *,
#decks.bv-decks *::before,
#decks.bv-decks *::after,
#recap.bv-recap *,
#recap.bv-recap *::before,
#recap.bv-recap *::after {
  box-sizing: border-box;
}

/* ---- shared eyebrow + display title ------------------------------------ */

#process .bv-process__eyebrow,
#work .bv-work__eyebrow,
#testimonials .bv-testimonials__eyebrow,
#fit .bv-fit__eyebrow,
#after-apply .bv-after__eyebrow,
#faq .bv-faq__eyebrow,
#decks .bv-decks__eyebrow,
#recap .bv-recap__eyebrow {
  margin: 0;
  color: var(--bv-low-pink);
  font-size: clamp(13px, calc(16 * var(--bv-low-u)), 16px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

#process .bv-process__title,
#work .bv-work__title,
#testimonials .bv-testimonials__title,
#fit .bv-fit__title,
#after-apply .bv-after__title,
#faq .bv-faq__title,
#decks .bv-decks__title,
#recap .bv-recap__title {
  margin: 0;
  color: var(--bv-low-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(34px, calc(72 * var(--bv-low-u)), 72px);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

#fit .bv-fit__title-accent,
#after-apply .bv-after__title-accent,
#recap .bv-recap__title-accent {
  color: var(--bv-low-pink);
}

#process .bv-process__header,
#work .bv-work__header,
#testimonials .bv-testimonials__header,
#fit .bv-fit__header,
#after-apply .bv-after__header,
#faq .bv-faq__header,
#recap .bv-recap__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* ============================================================
   Process (#process.bv-process), Figma 750:444
   The four stage cards are labels for visually hidden radios, so the
   details panel switches without script: the radios sit before both the
   stage row and the panel, and :checked ~ selectors pick the stage card
   and its details. Stage 02 starts selected, as in the mockup.
   ============================================================ */

#process.bv-process {
  padding-block:
    clamp(44px, calc(51 * var(--bv-low-u)), 51px)
    clamp(56px, calc(77 * var(--bv-low-u)), 77px);
  padding-inline: clamp(16px, calc(120 * var(--bv-low-u)), 120px);
  background: #ebf6fc;
}

#process .bv-process__header {
  gap: 16px;
}

#process .bv-process__lead {
  margin: 0;
  color: #4f5e7b;
  font-size: clamp(16px, calc(22 * var(--bv-low-u)), 22px);
  line-height: 1.1;
}

#process .bv-process__tabs {
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin-top: clamp(24px, calc(54 * var(--bv-low-u)), 54px);
}

#process .bv-process__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- stage selector ---------------------------------------------------- */

#process .bv-process__stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px clamp(0px, calc(40 * var(--bv-low-u)), 40px);
}

#process .bv-process__stage {
  display: flex;
  flex: 0 1 360px;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  min-width: 0;
  min-height: clamp(150px, calc(180 * var(--bv-low-u)), 180px);
  padding: 24px;
  border: 1px solid #e5e1ec;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#process .bv-process__stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

#process .bv-process__stage-num {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f1eff5;
  color: var(--bv-low-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  transition: background-color 160ms ease, color 160ms ease;
}

#process .bv-process__stage-name {
  min-width: 0;
  color: var(--bv-low-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

#process .bv-process__stage-desc {
  color: #6e6d8a;
  font-size: 16px;
  line-height: 1.4;
}

#process .bv-process__radio--1:checked ~ .bv-process__stages .bv-process__stage--1,
#process .bv-process__radio--2:checked ~ .bv-process__stages .bv-process__stage--2,
#process .bv-process__radio--3:checked ~ .bv-process__stages .bv-process__stage--3,
#process .bv-process__radio--4:checked ~ .bv-process__stages .bv-process__stage--4 {
  border-color: var(--bv-low-indigo);
  box-shadow: inset 0 0 0 1px var(--bv-low-indigo), 0 8px 8px rgba(61, 39, 136, 0.08);
}

#process .bv-process__radio--1:checked ~ .bv-process__stages .bv-process__stage--1 .bv-process__stage-num,
#process .bv-process__radio--2:checked ~ .bv-process__stages .bv-process__stage--2 .bv-process__stage-num,
#process .bv-process__radio--3:checked ~ .bv-process__stages .bv-process__stage--3 .bv-process__stage-num,
#process .bv-process__radio--4:checked ~ .bv-process__stages .bv-process__stage--4 .bv-process__stage-num {
  background: var(--bv-low-indigo);
  color: #fff;
}

#process .bv-process__radio--1:focus-visible ~ .bv-process__stages .bv-process__stage--1,
#process .bv-process__radio--2:focus-visible ~ .bv-process__stages .bv-process__stage--2,
#process .bv-process__radio--3:focus-visible ~ .bv-process__stages .bv-process__stage--3,
#process .bv-process__radio--4:focus-visible ~ .bv-process__stages .bv-process__stage--4 {
  outline: 3px solid var(--bv-low-pink);
  outline-offset: 3px;
}

/* Hover previews the selected look in magenta. It matches the :checked
   rules' specificity and comes after them, so it shows on the active
   stage too. */
@media (hover: hover) and (pointer: fine) {
  #process .bv-process__tabs .bv-process__stages .bv-process__stage:hover {
    border-color: var(--bv-low-pink);
    box-shadow: inset 0 0 0 1px var(--bv-low-pink), 0 8px 8px rgba(234, 0, 138, 0.08);
  }

  #process .bv-process__tabs .bv-process__stages .bv-process__stage:hover .bv-process__stage-num {
    background: var(--bv-low-pink);
    color: #fff;
  }
}

#process .bv-process__arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid #e5e1ec;
  border-radius: 50%;
  background: #fff;
  color: #6e6d8a;
}

#process .bv-process__arrow svg {
  width: 16px;
  height: 16px;
}

/* ---- details panel ----------------------------------------------------- */

#process .bv-process__panel {
  display: grid;
  grid-template-columns: clamp(240px, calc(400 * var(--bv-low-u)), 400px) minmax(0, 1fr);
  gap: clamp(28px, calc(48 * var(--bv-low-u)), 48px);
  align-items: center;
  margin-top: clamp(20px, calc(35 * var(--bv-low-u)), 35px);
  padding: clamp(24px, calc(48 * var(--bv-low-u)), 48px);
  border: 1.5px solid var(--bv-low-indigo);
  border-radius: 16px;
  background: #fff;
}

#process .bv-process__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

#process .bv-process__details {
  display: none;
  flex-direction: column;
  gap: clamp(20px, calc(32 * var(--bv-low-u)), 32px);
  min-width: 0;
}

#process .bv-process__radio--1:checked ~ .bv-process__panel .bv-process__details--1,
#process .bv-process__radio--2:checked ~ .bv-process__panel .bv-process__details--2,
#process .bv-process__radio--3:checked ~ .bv-process__panel .bv-process__details--3,
#process .bv-process__radio--4:checked ~ .bv-process__panel .bv-process__details--4 {
  display: flex;
}

#process .bv-process__details-title {
  margin: 0;
  color: var(--bv-low-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Column-first like the mockup: five rows down, then the second column. */
#process .bv-process__rows {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

#process .bv-process__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #fbfbfd;
}

#process .bv-process__row-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #1d1640;
  font-size: clamp(16px, calc(18 * var(--bv-low-u)), 18px);
  font-weight: 500;
  line-height: 1.25;
}

#process .bv-process__row-text::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bv-low-indigo);
}

#process .bv-process__tag {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid #e5e1ec;
  border-radius: 4px;
  background: #fff;
  color: #1d1640;
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#process .bv-process__tag--ongoing {
  border-color: var(--bv-low-pink);
  background: var(--bv-low-pink);
  color: #fff;
}

#process .bv-process__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px clamp(24px, calc(48 * var(--bv-low-u)), 48px);
  margin: clamp(28px, calc(45 * var(--bv-low-u)), 45px) 0 0;
}

#process .bv-process__legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

#process .bv-process__legend dd {
  margin: 0;
  color: #6e6d8a;
  font-size: 16px;
  line-height: normal;
}

/* ============================================================
   Work (#work.bv-work), Figma 750:552
   Logo wall cells are the Figma crops (assets/images/logos/clients/, 3x). WTF has
   no logo in the mockup, so it is a wordmark cell; the grid's ::after is a
   blank twelfth cell so 6, 4, 3 and 2 columns all close evenly. Case-study
   images are the Figma crops at 3x (assets/images/case-studies/), opened by the
   app.js lightbox from each [data-work] card.
   ============================================================ */

#work.bv-work {
  padding-block:
    clamp(48px, calc(81 * var(--bv-low-u)), 81px)
    clamp(48px, calc(60 * var(--bv-low-u)), 60px);
  padding-inline: clamp(16px, 4vw, 64px);
  background: #f9f9f9;
}

#work .bv-work__header {
  gap: 12px;
}

#work .bv-work__logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  width: min(1086px, 100%);
  margin: clamp(20px, calc(27 * var(--bv-low-u)), 27px) 0 0;
  padding: 0;
  border: 1px solid #d9d9d9;
  background: #d9d9d9;
  list-style: none;
}

#work .bv-work__logos::after {
  content: "";
  background: #f9f9f9;
}

#work .bv-work__logos li {
  display: flex;
  background: #f9f9f9;
}

#work .bv-work__logo {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: clamp(56px, calc(74 * var(--bv-low-u)), 74px);
  padding: 4px;
  color: #101010;
  transition: background-color 160ms ease;
}

#work .bv-work__logo:hover {
  background: #fff;
  color: #101010;
}

#work .bv-work__logo:focus-visible {
  outline: 3px solid #311b92;
  outline-offset: -3px;
}

#work .bv-work__logo img {
  display: block;
  width: 129px;
  max-width: 100%;
  height: auto;
}

#work .bv-work__wordmark {
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

#work .bv-work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, calc(40 * var(--bv-low-u)), 40px) clamp(16px, calc(24 * var(--bv-low-u)), 24px);
  width: 100%;
  max-width: 1280px;
  margin: clamp(32px, calc(46 * var(--bv-low-u)), 46px) 0 0;
  padding: 0;
  list-style: none;
}

#work .bv-work__item {
  display: flex;
  min-width: 0;
}

#work .bv-work__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  border-radius: 12px;
  cursor: pointer;
}

#work .bv-work__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #ecebe8;
}

#work .bv-work__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#work .bv-work__card:hover .bv-work__media img {
  transform: scale(1.03);
}

#work .bv-work__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 8px;
}

#work .bv-work__name {
  min-width: 0;
  color: #101010;
  font-size: clamp(14px, calc(16 * var(--bv-low-u)), 16px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

#work .bv-work__view {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #311b92;
  font-size: clamp(14px, calc(16 * var(--bv-low-u)), 16px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

/* The mockup draws this one smaller than the button arrows; hovering the
   card still slides it, through the shared [data-work]:hover rule. */
#work .bv-work__view .bv-btn-arrow {
  width: 12px;
  height: 12px;
}

#work .bv-work__name,
#work .bv-work__view {
  transition: color 200ms ease;
}

#work .bv-work__card:hover .bv-work__name,
#work .bv-work__card:hover .bv-work__view {
  color: #ea008a;
}

#work .bv-work__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(36px, calc(52 * var(--bv-low-u)), 52px);
  padding: 16px 32px;
  border: 1.5px solid #311b92;
  border-radius: 40px;
  background: #fff;
  color: #311b92;
  font-size: 14px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

#work .bv-work__more-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #311b92;
  color: #fff;
  transition: background-color 160ms ease, color 160ms ease;
}

#work .bv-work__more-icon svg {
  width: 12px;
  height: 12px;
}

#work .bv-work__more:hover {
  background: #311b92;
  color: #fff;
}

#work .bv-work__more:hover .bv-work__more-icon {
  background: #fff;
  color: #311b92;
}

#work .bv-work__more:focus-visible {
  outline: 3px solid #311b92;
  outline-offset: 3px;
}

/* ============================================================
   Testimonials (#testimonials.bv-testimonials)
   Figma: Rectangle 484 (750:5, gradient) with header-block 750:820 and
   testimonials-grid 750:823. Stars are one masked span per card.
   ============================================================ */

#testimonials.bv-testimonials {
  gap: clamp(24px, calc(19 * var(--bv-low-u)), 19px);
  padding-block: clamp(48px, calc(67 * var(--bv-low-u)), 67px);
  padding-inline: clamp(16px, calc(155 * var(--bv-low-u)), 155px);
  background: linear-gradient(100.86deg, #fff2f8 9.09%, #e8e2f7 90.91%);
}

#testimonials .bv-testimonials__header {
  gap: 8px;
}

#testimonials .bv-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, calc(30 * var(--bv-low-u)), 30px);
  width: 100%;
  max-width: 1609px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#testimonials .bv-testimonials__card {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: clamp(260px, calc(352 * var(--bv-low-u)), 352px);
  padding: clamp(28px, calc(45 * var(--bv-low-u)), 45px);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 15px 20px rgba(76, 43, 128, 0.06);
  transition: box-shadow 260ms ease;
}

#testimonials .bv-testimonials__card:hover {
  box-shadow: 0 24px 44px rgba(76, 43, 128, 0.18);
}

#testimonials .bv-testimonials__figure {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(40 * var(--bv-low-u)), 40px);
  width: 100%;
  margin: 0;
}

#testimonials .bv-testimonials__stars {
  display: block;
  width: 133px;
  height: 22.6px;
  background: #ea008a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") 0 0 / 22.6px 22.6px space no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") 0 0 / 22.6px 22.6px space no-repeat;
}

#testimonials .bv-testimonials__quote {
  margin: 0;
}

#testimonials .bv-testimonials__quote p {
  margin: 0;
  color: rgba(27, 15, 62, 0.85);
  font-size: clamp(17px, calc(20 * var(--bv-low-u)), 20px);
  line-height: 1.25;
}

#testimonials .bv-testimonials__author {
  display: flex;
  align-items: center;
  gap: 20px;
}

#testimonials .bv-testimonials__avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: 1.25px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

#testimonials .bv-testimonials__who {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  min-width: 0;
  line-height: normal;
}

#testimonials .bv-testimonials__name {
  color: #1b0f3e;
  font-size: clamp(17px, calc(20 * var(--bv-low-u)), 20px);
  font-weight: 700;
}

#testimonials .bv-testimonials__role {
  color: rgba(27, 15, 62, 0.6);
  font-size: clamp(15px, calc(17.6 * var(--bv-low-u)), 17.6px);
}

/* ============================================================
   Fit (#fit.bv-fit), Figma 750:878
   Barlow Semi Condensed is not self-hosted; its badge, button and note
   titles fall back to the loaded Barlow Condensed.
   ============================================================ */

#fit.bv-fit {
  padding-block:
    clamp(48px, calc(68 * var(--bv-low-u)), 68px)
    clamp(56px, calc(102 * var(--bv-low-u)), 102px);
  padding-inline: clamp(16px, 4vw, 64px);
  background: #fff;
}

#fit .bv-fit__header {
  gap: 12px;
}

#fit .bv-fit__eyebrow {
  color: #ea008a;
}

#fit .bv-fit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, calc(36 * var(--bv-low-u)), 36px);
  width: 100%;
  max-width: 1394px;
  margin-top: clamp(40px, calc(58 * var(--bv-low-u)), 58px);
}

#fit .bv-fit__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  min-height: clamp(460px, calc(562 * var(--bv-low-u)), 562px);
  padding:
    clamp(40px, calc(54 * var(--bv-low-u)), 54px)
    clamp(22px, calc(36 * var(--bv-low-u)), 36px)
    clamp(22px, calc(31.5 * var(--bv-low-u)), 31.5px);
  border: 1.7px solid #1cb1e3;
  border-radius: 18px;
  background: #fff;
  transition: box-shadow 260ms ease, scale 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#fit .bv-fit__card--no {
  border-color: var(--bv-low-pink);
}

@media (hover: hover) and (pointer: fine) {
  #fit .bv-fit__card:hover {
    box-shadow: 0 24px 44px rgba(28, 177, 227, 0.2);
    scale: 1.02;
  }

  #fit .bv-fit__card--no:hover {
    box-shadow: 0 24px 44px rgba(234, 0, 138, 0.16);
  }
}

#fit .bv-fit__badge {
  position: absolute;
  top: 0;
  left: clamp(20px, calc(43 * var(--bv-low-u)), 43px);
  margin: 0;
  padding: 6.75px 18px;
  border-radius: 22.5px;
  background: var(--bv-low-indigo);
  color: #fff;
  font-family: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

#fit .bv-fit__body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(31.5 * var(--bv-low-u)), 31.5px);
}

#fit .bv-fit__card--no .bv-fit__body {
  gap: clamp(18px, calc(27 * var(--bv-low-u)), 27px);
}

#fit .bv-fit__card-title {
  margin: 0;
  color: #372275;
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(26px, calc(31.5 * var(--bv-low-u)), 31.5px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

#fit .bv-fit__list {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, calc(27 * var(--bv-low-u)), 27px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#fit .bv-fit__card--no .bv-fit__list {
  gap: clamp(16px, calc(22.5 * var(--bv-low-u)), 22.5px);
}

#fit .bv-fit__list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  color: #2b2d42;
  font-size: clamp(15px, calc(16.86 * var(--bv-low-u)), 16.86px);
  font-weight: 500;
  line-height: 1.4;
}

#fit .bv-fit__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 31.5px;
  height: 31.5px;
  margin-top: -4px;
  border-radius: 50%;
  background:
    #def7ff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.5 13.5' fill='none'%3E%3Cpath d='M11.24 3.37 5.06 9.56 2.25 6.75' stroke='%234FC7EE' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 13.5px no-repeat;
}

#fit .bv-fit__card--no .bv-fit__list li::before {
  background:
    #fff1f4
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.5 13.5' fill='none'%3E%3Cpath d='M2.25 6.75h9' stroke='%23E9067E' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 13.5px no-repeat;
}

#fit .bv-fit__note {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  border: 1.1px solid #f9d6dc;
  border-radius: 9px;
  background: #fff1f4;
}

#fit .bv-fit__note-title {
  margin: 0;
  color: var(--bv-low-pink);
  font-family: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 14.6px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}

#fit .bv-fit__note-text {
  margin: 0;
  color: #2b2d42;
  font-size: 14.6px;
  font-weight: 500;
  line-height: 1.4;
}

#fit .bv-fit__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 58px;
  padding: 12px 20px;
  border: 1.7px solid #3f2682;
  border-radius: 50px;
  background: #3f2682;
  color: #fff;
  font-family: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(16px, calc(20.2 * var(--bv-low-u)), 20.2px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.12px;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

#fit .bv-fit__cta:hover {
  border-color: #2c1a5e;
  background: #2c1a5e;
  color: #fff;
}

#fit .bv-fit__cta--outline {
  border-color: var(--bv-low-pink);
  background: transparent;
  color: var(--bv-low-pink);
}

#fit .bv-fit__cta--outline:hover {
  border-color: var(--bv-low-pink);
  background: var(--bv-low-pink);
  color: #fff;
}

#fit .bv-fit__cta:focus-visible {
  outline: 3px solid var(--bv-low-indigo);
  outline-offset: 3px;
}

/* ============================================================
   After you apply (#after-apply.bv-after), Figma 750:1078
   The logo is the header's brand mark. The connector is the fork element:
   ::before is the stem under step 01 and ::after the crossbar with its two
   drops, set in from each side by 235/1167 of the flow as in the mockup.
   ============================================================ */

#after-apply.bv-after {
  padding-block:
    clamp(40px, calc(69 * var(--bv-low-u)), 69px)
    clamp(64px, calc(160 * var(--bv-low-u)), 160px);
  padding-inline: clamp(16px, 4vw, 64px);
  background: #ebf6fc;
}

#after-apply .bv-after__logo {
  display: block;
  width: clamp(150px, calc(222 * var(--bv-low-u)), 222px);
  height: auto;
}

#after-apply .bv-after__header {
  gap: 8px;
  margin-top: clamp(24px, calc(42 * var(--bv-low-u)), 42px);
}

#after-apply .bv-after__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1167px;
  margin-top: clamp(28px, calc(35.5 * var(--bv-low-u)), 35.5px);
}

#after-apply .bv-after__step {
  display: flex;
  align-items: center;
  gap: clamp(18px, calc(26.6 * var(--bv-low-u)), 26.6px);
  width: min(843px, 100%);
  padding: clamp(24px, calc(35.5 * var(--bv-low-u)), 35.5px);
  border: 1px solid #d3d3d3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 17.75px 17.75px rgba(61, 39, 136, 0.04);
}

#after-apply .bv-after__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

#after-apply .bv-after__icon svg {
  width: 24.4px;
  height: 24.4px;
}

#after-apply .bv-after__icon--apply {
  width: 66.6px;
  height: 66.6px;
  background: var(--bv-low-indigo);
  color: #fff;
}

#after-apply .bv-after__icon--apply svg {
  width: 26.6px;
  height: 26.6px;
}

#after-apply .bv-after__icon--yes {
  background: #1cb1e3;
  color: #fff;
}

#after-apply .bv-after__icon--no {
  background: #fdf2f7;
  color: var(--bv-low-pink);
}

#after-apply .bv-after__step-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6.66px;
  min-width: 0;
}

#after-apply .bv-after__kicker {
  margin: 0;
  color: var(--bv-low-pink);
  font-size: 14.4px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

#after-apply .bv-after__outcome .bv-after__kicker {
  font-weight: 800;
}

#after-apply .bv-after__outcome--yes .bv-after__kicker {
  color: #1cb1e3;
}

#after-apply .bv-after__step-title,
#after-apply .bv-after__outcome-title {
  margin: 0;
  color: var(--bv-low-indigo);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: 24.4px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  text-transform: none;
}

#after-apply .bv-after__outcome-title {
  font-size: 22.2px;
}

#after-apply .bv-after__text {
  margin: 0;
  color: #746e8f;
  font-size: 15.5px;
  line-height: 1.5;
}

#after-apply .bv-after__fork {
  position: relative;
  width: 100%;
  height: 66px;
}

#after-apply .bv-after__fork::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.2px;
  height: 33px;
  background: #9186c2;
  transform: translateX(-50%);
}

#after-apply .bv-after__fork::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 20.17%;
  bottom: 0;
  left: 20.17%;
  border: 3px solid #9186c2;
  border-top-width: 2.2px;
  border-bottom: 0;
}

#after-apply .bv-after__outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, calc(35.5 * var(--bv-low-u)), 35.5px);
  width: 100%;
}

#after-apply .bv-after__outcome {
  display: flex;
  flex-direction: column;
  gap: 22.2px;
  min-width: 0;
  padding: clamp(24px, calc(35.5 * var(--bv-low-u)), 35.5px);
  border: 1.66px solid #1cb1e3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 13.3px 13.3px rgba(61, 39, 136, 0.02);
}

#after-apply .bv-after__outcome--no {
  border-color: var(--bv-low-pink);
}

#after-apply .bv-after__outcome-head {
  display: flex;
  align-items: center;
  gap: 22.2px;
}

#after-apply .bv-after__outcome-names {
  display: flex;
  flex-direction: column;
  gap: 4.4px;
  min-width: 0;
}

#after-apply .bv-after__link,
#after-apply .bv-after__label {
  margin: 0;
  color: #1cb1e3;
  font-size: 14.4px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

#after-apply .bv-after__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5em;
  transition: color 160ms ease;
}

#after-apply .bv-after__link:hover {
  color: #0e7fa6;
}

#after-apply .bv-after__link:focus-visible {
  outline: 3px solid var(--bv-low-indigo);
  outline-offset: 3px;
}

#after-apply .bv-after__label {
  color: var(--bv-low-pink);
}

/* ============================================================
   FAQ (#faq.bv-faq), Figma 750:927
   Native exclusive <details>. styles.css forces every open summary to
   #592C82 with !important, so the open question colour needs the same
   weight here; the +/- sign is drawn with backgrounds, which it leaves alone.
   ============================================================ */

#faq.bv-faq {
  padding-block:
    clamp(48px, calc(61 * var(--bv-low-u)), 61px)
    clamp(56px, calc(100 * var(--bv-low-u)), 100px);
  padding-inline: clamp(16px, 4vw, 64px);
  background: linear-gradient(100.86deg, #fff2f8 9.09%, #e8e2f7 90.91%);
}

#faq .bv-faq__header {
  gap: 16px;
}

#faq .bv-faq__lead {
  max-width: 496px;
  margin: 0;
  color: #4f5e7b;
  font-size: clamp(16px, calc(22 * var(--bv-low-u)), 22px);
  line-height: 1.1;
}

#faq .bv-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1140px;
  margin-top: clamp(24px, calc(22 * var(--bv-low-u)), 22px);
}

#faq .bv-faq__item {
  border: 1.33px solid #e8e2f2;
  border-radius: 16px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#faq .bv-faq__item[open] {
  border: 2px solid #6a2db9;
  border-radius: 21px;
  box-shadow: 0 10.6px 15.9px rgba(106, 45, 185, 0.06);
}

#faq .bv-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, calc(31.8 * var(--bv-low-u)), 31.8px) clamp(18px, calc(31.8 * var(--bv-low-u)), 31.8px);
  color: #110e1c;
  font-size: clamp(18px, calc(24 * var(--bv-low-u)), 24px);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

#faq .bv-faq__question::-webkit-details-marker {
  display: none;
}

#faq .bv-faq__question:hover {
  color: #522383;
}

#faq .bv-faq__item[open] .bv-faq__question {
  padding-bottom: clamp(10px, calc(21.2 * var(--bv-low-u)), 21.2px);
  color: #522383 !important;
}

#faq .bv-faq__question:focus-visible {
  outline: 3px solid #6a2db9;
  outline-offset: 2px;
  border-radius: 14px;
}

#faq .bv-faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 42.4px;
  height: 42.4px;
}

#faq .bv-faq__sign::before,
#faq .bv-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12.4px;
  height: 2.65px;
  margin: -1.325px 0 0 -6.2px;
  border-radius: 2px;
  background: #110e1c;
  transition: transform 220ms ease, background-color 160ms ease;
}

#faq .bv-faq__sign::after {
  transform: rotate(90deg);
}

#faq .bv-faq__item[open] .bv-faq__sign::before,
#faq .bv-faq__item[open] .bv-faq__sign::after {
  background: #c80c81;
}

#faq .bv-faq__item[open] .bv-faq__sign::after {
  transform: rotate(90deg) scaleX(0);
}

#faq .bv-faq__answer {
  margin: 0;
  padding:
    0
    clamp(18px, calc(95.4 * var(--bv-low-u)), 95.4px)
    clamp(20px, calc(31.8 * var(--bv-low-u)), 31.8px)
    clamp(18px, calc(31.8 * var(--bv-low-u)), 31.8px);
  color: #5c586b;
  font-size: clamp(16px, calc(20 * var(--bv-low-u)), 20px);
  line-height: 1.6;
}

/* ============================================================
   Investor decks (#decks.bv-decks), Figma 750:966 + 750:972
   Cards keep the app.js preview contract ([data-motion-src] button, one
   <video>, [data-motion-status]). The mockup's lilac MORR card is the hover
   state (with the eye badge) and the amber Hardcore card the keyboard focus.
   ============================================================ */

#decks.bv-decks {
  padding-block:
    clamp(48px, calc(101 * var(--bv-low-u)), 101px)
    clamp(56px, calc(96 * var(--bv-low-u)), 96px);
  padding-inline: clamp(16px, calc(75 * var(--bv-low-u)), 75px);
  background: #fff;
}

#decks .bv-decks__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 1770px;
}

#decks .bv-decks__title {
  color: #000;
}

#decks .bv-decks__title-accent {
  color: var(--bv-low-indigo);
}

#decks .bv-decks__lead {
  margin: 0;
  color: #606066;
  font-size: clamp(16px, calc(18 * var(--bv-low-u)), 18px);
  line-height: 1.5;
}

#decks .bv-decks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, calc(44.25 * var(--bv-low-u)), 44.25px) clamp(16px, calc(33.2 * var(--bv-low-u)), 33.2px);
  width: 100%;
  max-width: 1770px;
  margin: clamp(24px, calc(36 * var(--bv-low-u)), 36px) 0 0;
  padding: 0;
  list-style: none;
}

#decks .bv-decks__grid li {
  display: flex;
  min-width: 0;
}

#decks .bv-decks__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.4px solid #e4e4e7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5.5px 16.6px rgba(0, 0, 0, 0.03);
  color: #151517;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#decks .bv-decks__media {
  position: relative;
  display: block;
  aspect-ratio: 568 / 332;
  background: #f1f1f3;
}

#decks .bv-decks__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#decks .bv-decks__badge {
  position: absolute;
  top: 16.6px;
  right: 17px;
  z-index: 1;
  display: flex;
  padding: 11px;
  border-radius: 999px;
  background: #5a2b95;
  color: #fff;
  opacity: 0;
  transition: opacity 160ms ease;
}

#decks .bv-decks__badge svg {
  display: block;
  width: 19.4px;
  height: 19.4px;
}

/* The mockup truncates names; where a name and the status cannot share a
   line, the status wraps under it instead so the brand stays readable. */
#decks .bv-decks__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: clamp(18px, calc(27.66 * var(--bv-low-u)), 27.66px);
  background: #fff;
}

#decks .bv-decks__name {
  flex: 1 0 auto;
  max-width: 100%;
  overflow: hidden;
  color: #151517;
  font-size: clamp(18px, calc(24 * var(--bv-low-u)), 24px);
  font-weight: 700;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#decks .bv-decks__action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8.3px;
  color: #606066;
  transition: color 160ms ease;
}

#decks .bv-decks__action svg {
  width: 19.4px;
  height: 19.4px;
}

#decks .bv-decks__action small {
  color: inherit;
  font-size: clamp(12px, calc(16.6 * var(--bv-low-u)), 16.6px);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.69px;
  text-transform: uppercase;
}

#decks .bv-decks__card:hover {
  border-color: #c0a9f0;
  box-shadow: inset 0 0 0 1.4px #c0a9f0, 0 5.5px 16.6px rgba(0, 0, 0, 0.03);
}

#decks .bv-decks__card:hover .bv-decks__action {
  color: #5a2b95;
}

#decks .bv-decks__card:hover .bv-decks__badge {
  opacity: 1;
}

#decks .bv-decks__card:focus-visible {
  outline: none;
  border-color: #f59e0b;
  box-shadow: inset 0 0 0 1.4px #f59e0b, 0 0 0 3px rgba(245, 158, 11, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  #process .bv-process__stage,
  #process .bv-process__stage-num,
  #work .bv-work__media img,
  #work .bv-work__more,
  #work .bv-work__more-icon,
  #fit .bv-fit__cta,
  #faq .bv-faq__item,
  #faq .bv-faq__sign::before,
  #faq .bv-faq__sign::after,
  #decks .bv-decks__card,
  #decks .bv-decks__badge {
    transition: none;
  }

  #work .bv-work__card:hover .bv-work__media img {
    transform: none;
  }
}

/* ---- lower sections: laptop -------------------------------------------- */

@media (max-width: 1279px) {
  #process .bv-process__stages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
  }

  #process .bv-process__arrow {
    display: none;
  }

  #process .bv-process__stage {
    min-height: 0;
  }

  #process .bv-process__rows {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- lower sections: tablet -------------------------------------------- */

@media (max-width: 1099px) {
  #work .bv-work__logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #work .bv-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #testimonials .bv-testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The odd third card centres under the pair. */
  #testimonials .bv-testimonials__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(16px, calc(30 * var(--bv-low-u)), 30px) / 2);
  }

  #testimonials .bv-testimonials__card {
    min-height: 0;
  }

  #decks .bv-decks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  #fit .bv-fit__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 640px;
  }

  #fit .bv-fit__card {
    min-height: 0;
  }

  #process .bv-process__panel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  #process .bv-process__art {
    max-width: 320px;
  }

  #process .bv-process__details {
    width: 100%;
  }
}

@media (max-width: 767px) {
  #testimonials .bv-testimonials__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }

  #testimonials .bv-testimonials__card:last-child:nth-child(odd) {
    width: 100%;
  }

  #after-apply .bv-after__fork {
    height: 33px;
  }

  #after-apply .bv-after__fork::after, #after-apply .bv-after__fork::before {
    display: none;
  }

  #after-apply .bv-after__outcomes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- lower sections: phone --------------------------------------------- */

@media (max-width: 639px) {
  #work .bv-work__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #work .bv-work__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #work .bv-work__logo img {
    width: 110px;
  }

  #work .bv-work__wordmark {
    font-size: 24px;
  }

  #decks .bv-decks__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #process .bv-process__stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #process .bv-process__stage {
    gap: 8px;
    padding: 18px 20px;
  }

  #process .bv-process__art {
    max-width: 240px;
  }

  #process .bv-process__row {
    padding-inline: 12px;
  }

  #faq .bv-faq__sign {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 479px) {
  #after-apply .bv-after__step {
    flex-direction: column;
    align-items: flex-start;
  }

  #after-apply .bv-after__outcome-head {
    gap: 16px;
  }

  #fit .bv-fit__cta {
    letter-spacing: 0.5px;
  }
}

@media (max-width: 379px) {
  #work .bv-work__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Offer recap (#recap.bv-recap)
   Figma: Rectangle 485 (750:1026, #f5f0f8 to #ebe3f5, 1920x880) with
   hero-section 750:1028, pricing-section 750:1032 and the payment-terms
   note 750:1027. The mockup turns the old dark rows into white cards on
   the lilac wash and gives every tier the same cyan kicker and pink price.

   The section keeps data-card="1" for the sticky stack and each row is
   still one #qualify link carrying its data-entry-intent. The eyebrow,
   display title and accent come from the shared lower-section rules; the
   old data-bp="recap-row" / "recap-desc" hooks are gone, which retires
   their styles.css breakpoint overrides.
   ============================================================ */

#recap.bv-recap {
  --bv-recap-ink: #1f1a24;
  --bv-recap-body: #595460;
  --bv-recap-cyan: #19a5e2;

  padding-block:
    clamp(48px, calc(107 * var(--bv-low-u)), 107px)
    clamp(56px, calc(147 * var(--bv-low-u)), 147px);
  padding-inline: clamp(16px, calc(75 * var(--bv-low-u)), 75px);
  background: linear-gradient(180deg, #f5f0f8 0%, #ebe3f5 100%);
}

#recap .bv-recap__header {
  gap: clamp(10px, calc(16 * var(--bv-low-u)), 16px);
  max-width: 1200px;
}

#recap .bv-recap__list {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(16 * var(--bv-low-u)), 16px);
  width: 100%;
  max-width: 1200px;
  margin: clamp(32px, calc(78 * var(--bv-low-u)), 78px) 0 0;
  padding: 0;
  list-style: none;
}

#recap .bv-recap__list li {
  display: flex;
  min-width: 0;
}

/* 400 / 420 / 314 Figma columns; the offer column keeps its intrinsic
   width so the price and the button never wrap against each other. */
#recap .bv-recap__row {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 400fr) minmax(0, 420fr) auto;
  align-items: center;
  gap: clamp(16px, calc(24 * var(--bv-low-u)), 24px);
  min-width: 0;
  padding:
    clamp(18px, calc(24 * var(--bv-low-u)), 24px)
    clamp(18px, calc(32 * var(--bv-low-u)), 32px);
  border-radius: clamp(12px, calc(16 * var(--bv-low-u)), 16px);
  background: #fff;
  box-shadow: 0 8px 8px rgba(61, 39, 136, 0.05);
  color: var(--bv-recap-ink);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

#recap .bv-recap__names {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, calc(8 * var(--bv-low-u)), 8px);
  min-width: 0;
}

#recap .bv-recap__kicker {
  color: var(--bv-recap-cyan);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(13px, calc(14 * var(--bv-low-u)), 14px);
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

#recap .bv-recap__name {
  color: var(--bv-recap-ink);
  font-size: clamp(18px, calc(22 * var(--bv-low-u)), 22px);
  font-weight: 800;
  line-height: normal;
}

#recap .bv-recap__desc {
  min-width: 0;
  color: var(--bv-recap-body);
  font-size: clamp(14px, calc(15 * var(--bv-low-u)), 15px);
  font-weight: 400;
  line-height: 1.47;
}

#recap .bv-recap__offer {
  display: flex;
  align-items: center;
  gap: clamp(14px, calc(24 * var(--bv-low-u)), 24px);
}

#recap .bv-recap__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

#recap .bv-recap__price-label {
  color: var(--bv-recap-body);
  font-size: clamp(10.5px, calc(11 * var(--bv-low-u)), 11px);
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

/* styles.css owns .bv-price ordering (discount first, struck price under
   it); only the light-surface colors and the mockup's sizes move here. */
#recap .bv-recap__price {
  align-items: flex-end;
  gap: 2px;
}

#recap .bv-recap__price .bv-price__discount {
  color: var(--bv-low-pink);
  font-size: clamp(20px, calc(26 * var(--bv-low-u)), 26px);
  font-weight: 800;
  letter-spacing: 0;
}

#recap .bv-recap__price .bv-price__regular {
  color: var(--bv-recap-body);
  font-size: clamp(12.5px, calc(14 * var(--bv-low-u)), 14px);
  font-weight: 500;
  text-decoration-thickness: 1px;
  opacity: 0.7;
}

#recap .bv-recap__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding:
    clamp(10px, calc(12 * var(--bv-low-u)), 12px)
    clamp(14px, calc(20 * var(--bv-low-u)), 20px);
  border: 1px solid var(--bv-recap-ink);
  border-radius: 8px;
  color: var(--bv-recap-ink);
  font-family: "Barlow Condensed", "Arial Narrow", Barlow, sans-serif;
  font-size: clamp(13px, calc(14 * var(--bv-low-u)), 14px);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

#recap .bv-recap__note {
  max-width: 1200px;
  margin: clamp(24px, calc(40 * var(--bv-low-u)), 40px) 0 0;
  color: var(--bv-recap-body);
  font-size: clamp(14px, calc(15 * var(--bv-low-u)), 15px);
  line-height: 1.47;
  text-align: center;
  text-wrap: pretty;
}

/* A 2% zoom grows a 1200px row by 12px a side, well inside the section's
   side padding and the list's row gap, so it never meets its neighbours
   or the sections around it. */
#recap .bv-recap__row:hover {
  box-shadow: 0 20px 40px rgba(61, 39, 136, 0.18);
  transform: scale(1.02);
}

@media (hover: none), (pointer: coarse) {
  #recap .bv-recap__row:hover {
    transform: none;
  }
}

#recap .bv-recap__row:hover .bv-recap__button {
  background: var(--bv-recap-ink);
  color: #fff;
}

#recap .bv-recap__row:focus-visible {
  outline: 3px solid var(--bv-low-pink);
  outline-offset: 3px;
}

/* ---- recap: tablet ----------------------------------------------------- */

@media (max-width: 1099px) {
  #recap .bv-recap__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 10px;
  }

  #recap .bv-recap__names {
    grid-column: 1;
    grid-row: 1;
  }

  #recap .bv-recap__desc {
    grid-column: 1;
    grid-row: 2;
  }

  #recap .bv-recap__offer {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---- recap: phone ------------------------------------------------------ */

@media (max-width: 639px) {
  #recap .bv-recap__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #recap .bv-recap__offer {
    justify-content: space-between;
  }

  /* Stacked, the right-aligned price reads as ragged against the card. */
  #recap .bv-recap__pricing,
  #recap .bv-recap__price {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  #recap .bv-recap__row,
  #recap .bv-recap__button {
    transition: none;
  }

  #recap .bv-recap__row:hover {
    transform: none;
  }
}

/* ============================================================
   Site footer (footer.bv-footer)
   Figma: node 750:1122, the flattened 1920x362 footer under the recap.
   Measurements are Figma pixels at 1920; --bv-footer-u scales them, so a
   1512px viewport reproduces the mockup 1:1. The qualifier pill is the
   mockup's violet (#592c82), not the older magenta.

   styles.css still owns the footer's sticky-stack seam (position, the
   28px leading radius and --bv-stack-footer-min-height) and the shared
   .bv-footer-legal row, so only surface, type and spacing live here.
   ============================================================ */

footer.bv-footer {
  --bv-footer-u: min(1px, 100vw / 1920);
  --bv-footer-violet: #592c82;
  --bv-footer-violet-hover: #44205f;

  box-sizing: border-box;
  padding:
    clamp(40px, calc(61 * var(--bv-footer-u)), 61px)
    clamp(20px, calc(172 * var(--bv-footer-u)), 172px)
    clamp(36px, calc(50 * var(--bv-footer-u)), 50px);
  background: #0b0813;
  color: #fff;
  font-family: Barlow, sans-serif;
}

footer.bv-footer *,
footer.bv-footer *::before,
footer.bv-footer *::after {
  box-sizing: border-box;
}

footer.bv-footer .bv-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, calc(48 * var(--bv-footer-u)), 48px);
}

footer.bv-footer .bv-footer__brand {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(16 * var(--bv-footer-u)), 16px);
  min-width: 0;
}

/* The lockup is 286x150; the mockup draws it 191px wide. */
footer.bv-footer .bv-footer__logo {
  display: block;
  width: clamp(132px, calc(191 * var(--bv-footer-u)), 191px);
  height: auto;
}

footer.bv-footer .bv-footer__tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(13.5px, calc(17 * var(--bv-footer-u)), 17px);
  line-height: 1.6;
}

footer.bv-footer .bv-footer__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding:
    clamp(15px, calc(23 * var(--bv-footer-u)), 23px)
    clamp(24px, calc(35 * var(--bv-footer-u)), 35px);
  border-radius: 999px;
  background: var(--bv-footer-violet);
  color: #fff;
  font-size: clamp(13px, calc(16 * var(--bv-footer-u)), 16px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease;
}

footer.bv-footer .bv-footer__cta:hover {
  background: var(--bv-footer-violet-hover);
  color: #fff;
}

footer.bv-footer .bv-footer__cta:focus-visible {
  outline: 3px solid #e9067e;
  outline-offset: 3px;
}

footer.bv-footer .bv-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px clamp(20px, calc(24 * var(--bv-footer-u)), 24px);
  margin-top: clamp(32px, calc(49 * var(--bv-footer-u)), 49px);
  padding-top: clamp(20px, calc(34 * var(--bv-footer-u)), 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

footer.bv-footer .bv-footer__copyright,
footer.bv-footer .bv-footer__proof {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(12.5px, calc(16 * var(--bv-footer-u)), 16px);
  line-height: 1.5;
}

footer.bv-footer .bv-footer-legal {
  gap: 10px clamp(16px, calc(23 * var(--bv-footer-u)), 23px);
}

/* The mockup sets the legal row plain; the underline returns on hover and
   on keyboard focus so the links stay recognisable. */
footer.bv-footer .bv-footer-legal a {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(12.5px, calc(16 * var(--bv-footer-u)), 16px);
  line-height: 1.5;
  text-decoration: none;
}

footer.bv-footer .bv-footer-legal a:hover,
footer.bv-footer .bv-footer-legal a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ---- footer: tablet + phone -------------------------------------------- */

@media (max-width: 899px) {
  footer.bv-footer .bv-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  footer.bv-footer .bv-footer__bottom {
    /* flex-direction: column-reverse; */
    align-items: center;
    gap: 12px;
    display: flex;
    justify-content: center;
  }
  p.bv-footer__copyright {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  footer.bv-footer .bv-footer__cta {
    transition: none;
  }
}

/* ============================================================
   Back-to-top button (.bv-to-top)
   app.js adds .is-visible once the page has scrolled most of a viewport
   and scrolls back to the top on click. Hidden, it is visibility: hidden,
   so it also leaves the tab order.

   It sits bottom-right, stacked above the fixed "Privacy choices" pill,
   and below the lightbox (z-index 100) and consent banner. The icon is
   the shared .bv-btn-arrow turned to point up on its wrapper, so the
   shared hover slide nudges it upward instead of sideways.
   ============================================================ */

.bv-to-top {
  position: fixed;
  z-index: 90;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ea008a;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 10px 24px rgba(11, 8, 19, 0.22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 200ms ease,
    transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 160ms ease,
    visibility 0s linear 200ms;
}

.bv-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.bv-to-top__icon {
  display: flex;
  transform: rotate(-90deg);
}

.bv-to-top:hover {
  background: #c4007a;
}

.bv-to-top:focus-visible {
  outline: 3px solid #522c90;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .bv-to-top {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-to-top {
    transform: none;
    transition: none;
  }
}

@media print {
  .bv-to-top {
    display: none;
  }
}