/* ==========================================================================
   BAS Vendor Showcase — Stylesheet
   V1 (The Showcase) + V2 (The Annotated Tour)
   Version: 1.6.1
   Design system: Website Hero section with Bea Animation handoff
   Scope: .bvs-v1__, .bvs-v2__, .bvs-browser, .bvs-btn, .bvs-dot
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  --bvs-green:       #70ac43;
  --bvs-lime:        #c2e86b;
  --bvs-green-dark:  #1d741b;
  --bvs-teal:        #30b2b4;
  --bvs-tomato:      #ff4c25;
  --bvs-coral:       #ff7660;
  --bvs-butter:      #ffda3d;
  --bvs-cream:       #fffbef;
  --bvs-ink:         #313131;
  --bvs-ink-soft:    #4a4a4a;
  --bvs-ink-muted:   #8a8a8a;
  --bvs-border:      #e7e2d2;

  --bvs-font-display: 'Playfair Display', Georgia, serif;
  --bvs-font-body:    'Lato', system-ui, -apple-system, sans-serif;
  --bvs-font-hand:    'Great Vibes', cursive;

  --bvs-radius-pill: 999px;
  --bvs-radius-lg:   14px;

  --bvs-grad-green: linear-gradient(135deg, #c2e86b 0%, #70ac43 60%, #1d741b 100%);
  --bvs-bg-dark:    radial-gradient(120% 80% at 80% 0%, #3a3a3a 0%, #2a2a2a 60%, #1f1f1f 100%);
}

/* --------------------------------------------------------------------------
   1. SHARED PRIMITIVES
   -------------------------------------------------------------------------- */

/* Browser chrome dots */
.bvs-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Primary CTA button */
.bvs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--bvs-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--bvs-radius-pill);
  border: 0;
  cursor: pointer;
  color: #fff;
  background: var(--bvs-grad-green);
  text-decoration: none;
  white-space: nowrap;
  transition: filter .2s ease, transform .15s ease;
}
.bvs-btn:hover  { filter: brightness(1.07); transform: translateY(-1px); }
.bvs-btn:active { transform: translateY(1px); filter: none; }

/* Ghost variant (for dark backgrounds) */
.bvs-btn--ghost {
  background: transparent;
  color: var(--bvs-cream);
  box-shadow: inset 0 0 0 1.5px rgba(255, 251, 239, .4);
}
.bvs-btn--ghost:hover { background: rgba(255, 251, 239, .06); filter: none; }

/* Shared browser chrome */
.bvs-browser {
  background: #fff;
  border-radius: var(--bvs-radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 8px 16px rgba(0, 0, 0, .18);
}
.bvs-browser__bar {
  background: #f4f0e3;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  border-bottom: 1px solid #e3dcc4;
}
.bvs-browser__url {
  margin-left: 14px;
  flex: 1;
  height: 20px;
  background: #fff;
  border-radius: var(--bvs-radius-pill);
  border: 1px solid #e3dcc4;
  font-size: 11px;
  color: #8a8a8a;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--bvs-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bvs-browser__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   2. V1 — THE SHOWCASE
   Dark cinematic stage · three fanned browser windows · Bea flying

   Sizing model (1.6.0): the section is fully fluid. There is no max-width and
   no fixed pixel geometry — padding and type scale with clamp(), the stage
   holds its shape with aspect-ratio, and every window inside it is a
   percentage of the stage. A 2560px monitor gets a proportionally bigger
   showcase instead of a 1440px island with grey shoulders.
   -------------------------------------------------------------------------- */

.bvs-v1 {
  position: relative;
  width: 100%;
  max-width: none;              /* was 1440px — the "stops at 80%" bug */
  margin: 0 auto;
  overflow: hidden;
  background: var(--bvs-bg-dark);
  color: var(--bvs-cream);
  padding: clamp(48px, 5vw, 110px) clamp(20px, 5vw, 110px) 0;
  box-sizing: border-box;
  font-family: var(--bvs-font-body);
  /* min-height removed: height is content-driven now that the CTA bar is in
     normal flow, so nothing can be pushed out of the box and clipped. */
}

/* Leaf illustration — lower left, bleeds off edge */
.bvs-v1__leaf {
  position: absolute;
  left: clamp(-140px, -8vw, -90px);
  bottom: -80px;
  width: clamp(260px, 29vw, 620px);
  height: auto;
  opacity: .85;
  transform: rotate(-12deg);
  filter: hue-rotate(60deg) saturate(.7) brightness(1.15);
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}

/* Lime radial glow — upper right */
.bvs-v1__lime-blob {
  position: absolute;
  right: -14vw;
  top: -14vw;
  width: 42vw;
  height: 42vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(194, 232, 107, .16), transparent 70%);
  pointer-events: none;
}

/* ── 2-column header ── */
.bvs-v1__header {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4.4vw, 96px);
  align-items: end;
  position: relative;
  z-index: 2;
}

.bvs-v1__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bvs-font-body);
  font-weight: 900;
  font-size: clamp(11px, .92vw, 18px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bvs-lime);
}
.bvs-v1__eyebrow-rule {
  display: inline-block;
  width: clamp(20px, 1.7vw, 34px);
  height: 1px;
  background: var(--bvs-lime);
  flex-shrink: 0;
}

.bvs-v1__h2 {
  font-family: var(--bvs-font-display);
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 128px);
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--bvs-cream);
  margin: clamp(12px, 1.3vw, 26px) 0 0;
  text-wrap: balance;
}
.bvs-v1__h2 em {
  font-style: italic;
  color: var(--bvs-lime);
}

.bvs-v1__copy-col { padding-bottom: clamp(8px, 1.1vw, 24px); }

.bvs-v1__subtext {
  font-size: clamp(16px, 1.33vw, 26px);
  line-height: 1.6;
  color: #d8d2bd;
  max-width: clamp(380px, 32vw, 640px);
  margin: 0;
}
.bvs-v1__highlight {
  color: var(--bvs-butter);
  font-weight: 700;
}

/* Feature chips */
.bvs-v1__chips {
  display: flex;
  gap: 10px;
  margin-top: clamp(18px, 2vw, 40px);
  flex-wrap: wrap;
}
.bvs-v1__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(7px, .6vw, 12px) clamp(13px, 1.15vw, 24px);
  border-radius: var(--bvs-radius-pill);
  background: rgba(255, 251, 239, .06);
  color: #f6f2e4;
  font-size: clamp(12px, .92vw, 18px);
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid rgba(255, 251, 239, .12);
}
.bvs-v1__chip-dot {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Stage — three fanned browser windows ──
   aspect-ratio replaces the old fixed 620px height so the whole arrangement
   scales with the viewport instead of overflowing or leaving dead space. */
.bvs-v1__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 620;
  margin-top: clamp(32px, 4vw, 84px);
}

/* Browser chrome inside the stage scales with it */
.bvs-v1__stage .bvs-dot {
  width: clamp(7px, .86vw, 17px);
  height: clamp(7px, .86vw, 17px);
}
.bvs-v1__stage .bvs-browser__bar {
  height: clamp(24px, 2.66vw, 52px);
  padding: 0 clamp(9px, 1.1vw, 22px);
  gap: clamp(5px, .62vw, 12px);
}
.bvs-v1__stage .bvs-browser__url {
  margin-left: clamp(8px, 1.1vw, 22px);
  height: clamp(14px, 1.56vw, 31px);
  font-size: clamp(8px, .86vw, 17px);
  padding: 0 clamp(7px, .94vw, 19px);
}

/* Soft radial spotlight beneath stage */
.bvs-v1__spotlight {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 86%;
  height: 84%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(194, 232, 107, .18), transparent 70%);
  pointer-events: none;
}

/* Base window wrapper */
.bvs-v1__win { position: absolute; }

/* Map — back left, tilted */
.bvs-v1__win--map {
  left: 1.6%;
  top: 9.7%;
  width: 42%;
  transform: rotate(-5deg);
  opacity: .96;
}

/* Events — back right, tilted */
.bvs-v1__win--event {
  right: 1.6%;
  top: 12.9%;
  width: 40.6%;
  transform: rotate(4deg);
}

/* Shop — front center, z-index 2 */
.bvs-v1__win--shop {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 56.25%;
  z-index: 2;
}

/* The rotating screen. aspect-ratio matches the source screenshots (720x520)
   so the window grows with the stage instead of cropping to a fixed height. */
.bvs-v1__screen {
  width: 100%;
  aspect-ratio: 720 / 520;
  overflow: hidden;
  background: #fffbef;
}
.bvs-v1__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* "LIVE" pill above shop browser */
.bvs-v1__live-pill {
  position: absolute;
  top: clamp(-24px, -1.1vw, -12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bvs-lime);
  color: var(--bvs-green-dark);
  padding: clamp(5px, .5vw, 10px) clamp(11px, 1.1vw, 22px);
  border-radius: var(--bvs-radius-pill);
  font-size: clamp(9px, .86vw, 17px);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
}
.bvs-v1__live-dot {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--bvs-green-dark);
  box-shadow: 0 0 0 3px rgba(29, 116, 27, .25);
  flex-shrink: 0;
}

/* Captions below back browsers */
.bvs-v1__caption {
  margin-top: clamp(10px, 1.25vw, 26px);
  text-align: left;
}
.bvs-v1__caption--right { text-align: right; }

.bvs-v1__caption-label {
  display: block;
  font-family: var(--bvs-font-body);
  font-weight: 900;
  font-size: clamp(9px, .86vw, 17px);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bvs-v1__caption-sub {
  display: block;
  font-family: var(--bvs-font-body);
  font-size: clamp(11px, 1.02vw, 20px);
  color: #bfbfbf;
  margin-top: 4px;
}

/* Bea — flying, horizontally mirrored, upper-right of shop */
.bvs-v1__bea {
  position: absolute;
  right: 4%;
  top: -6%;
  width: clamp(130px, 18.75vw, 380px);
  height: auto;
  transform: scaleX(-1) rotate(-8deg);
  z-index: 5;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
  pointer-events: none;
}

/* Speech bubble */
.bvs-v1__bea-bubble {
  position: absolute;
  right: 14%;
  top: -3%;
  background: var(--bvs-cream);
  color: var(--bvs-ink);
  padding: clamp(8px, .8vw, 16px) clamp(12px, 1.25vw, 26px);
  border-radius: 14px;
  font-family: var(--bvs-font-hand);
  font-size: clamp(17px, 1.9vw, 38px);
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  transform: rotate(-4deg);
  z-index: 6;
  white-space: nowrap;
}

/* Dashed arrow SVG */
.bvs-v1__arrow {
  position: absolute;
  right: 18%;
  top: 13%;
  width: clamp(110px, 14vw, 285px);
  height: auto;
  aspect-ratio: 180 / 140;
  z-index: 4;
  pointer-events: none;
}

/* ── CTA bar ──
   1.6.0: in normal flow. It used to be absolutely positioned against a fixed
   1100px min-height, which is why the "See a Live Shop" button slid under the
   shop window on some viewports. Nothing overlaps it now. */
.bvs-v1__cta-bar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(20px, 2.2vw, 44px);
  margin-top: clamp(40px, 4vw, 80px);
  padding-bottom: clamp(44px, 4.4vw, 88px);
  z-index: 3;
  position: relative;
}
.bvs-v1__cta-btns {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 22px);
  flex-wrap: wrap;
  min-width: 0;
}
.bvs-v1__cta-btns .bvs-btn {
  font-size: clamp(12px, .94vw, 18px);
  padding: clamp(12px, 1.1vw, 22px) clamp(20px, 2vw, 40px);
  min-width: 0;
}

.bvs-v1__stats {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 36px);
  flex-wrap: wrap;
}
.bvs-v1__stat {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.bvs-v1__stat-num {
  font-family: var(--bvs-font-display);
  font-size: clamp(19px, 1.72vw, 34px);
  font-weight: 700;
  color: var(--bvs-cream);
}
.bvs-v1__stat-lbl {
  font-size: clamp(10px, .86vw, 17px);
  color: #8a8a8a;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.bvs-v1__stat-rule {
  display: block;
  width: 1px;
  height: clamp(24px, 2.2vw, 44px);
  background: rgba(255, 251, 239, .18);
}

/* ── V1 Template pills (below rotating shop browser) ── */
.bvs-v1__tmpl-pills {
  position: absolute;
  bottom: clamp(-56px, -2.9vw, -30px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.bvs-v1__tmpl-pill {
  font-family: var(--bvs-font-body);
  font-size: clamp(9px, .78vw, 15px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: clamp(4px, .4vw, 9px) clamp(10px, .94vw, 19px);
  border-radius: 999px;
  background: rgba(255, 251, 239, .10);
  color: #bfbfbf;
  border: 1px solid rgba(255, 251, 239, .18);
  cursor: default;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.bvs-v1__tmpl-pill--active {
  background: var(--bvs-lime);
  color: var(--bvs-green-dark);
  border-color: var(--bvs-lime);
}

/* ── V1 Responsive ── */

/* Tablet / narrow laptop: stack the header, keep the fanned stage. */
@media (max-width: 1100px) {
  .bvs-v1__header { grid-template-columns: 1fr; gap: 28px; }
  /* Narrower column brings the leaf up behind the stats — fade it back. */
  .bvs-v1__leaf   { opacity: .45; }
  .bvs-v1__stage  { aspect-ratio: 1280 / 660; }
  .bvs-v1__cta-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Phone: real mobile layout ──
   The center window becomes a phone, showing the phone-width render of the
   storefront (swapped in by bvs-tour.js) instead of a desktop screenshot
   cropped to a 520px-tall slot — which is what was cutting the shop off. */
@media (max-width: 700px) {
  .bvs-v1 { padding: 40px 20px 0; }

  /* The leaf bleeds across the CTA on a narrow column — drop it. */
  .bvs-v1__leaf { display: none; }

  /* Stage: single device in normal document flow */
  .bvs-v1__stage {
    height: auto;
    aspect-ratio: auto;
    margin-top: 32px;
    overflow: visible;
  }

  /* Hide the angled side windows + decorative extras */
  .bvs-v1__win--map,
  .bvs-v1__win--event,
  .bvs-v1__spotlight,
  .bvs-v1__bea,
  .bvs-v1__bea-bubble,
  .bvs-v1__arrow { display: none; }

  /* Center window: static block, centered */
  .bvs-v1__win--shop {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Live pill: static flow above the phone */
  .bvs-v1__live-pill {
    position: static;
    transform: none;
    display: inline-flex;
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: .12em;
    white-space: normal;
    text-align: center;
  }

  /* Browser chrome → phone chassis */
  .bvs-v1__win--shop .bvs-browser {
    position: relative;
    width: 100%;
    max-width: 272px;
    padding: 26px 9px 16px;   /* forehead holds the speaker pill, chin the bar */
    border-radius: 40px;
    background: #17181a;
    box-shadow:
      0 0 0 1.5px #3a3d42,
      0 26px 50px rgba(0, 0, 0, .5),
      0 8px 16px rgba(0, 0, 0, .28);
  }

  /* Speaker pill in the forehead — sits in the bezel, never over the screen */
  .bvs-v1__win--shop .bvs-browser::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 8px;
    border-radius: 99px;
    background: #303338;
    z-index: 2;
  }

  /* Home indicator */
  .bvs-v1__win--shop .bvs-browser::after {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 3px;
    border-radius: 99px;
    background: rgba(255, 251, 239, .5);
  }

  /* The desktop URL bar has no place on a phone */
  .bvs-v1__win--shop .bvs-browser__bar { display: none; }

  /* Screen: portrait, matches the 390x800 mobile renders */
  .bvs-v1__screen {
    aspect-ratio: 390 / 800;
    border-radius: 28px;
    background: #fffbef;
  }
  .bvs-v1__screen img { object-fit: cover; object-position: top; }

  /* Template pills: static, centered, below the phone */
  .bvs-v1__tmpl-pills {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .bvs-v1__cta-bar   { margin-top: 32px; padding-bottom: 48px; }
  .bvs-v1__cta-btns  { flex-direction: column; align-items: stretch; width: 100%; }
  .bvs-v1__cta-btns .bvs-btn { width: 100%; }
  .bvs-v1__stats     { flex-wrap: wrap; gap: 16px; }
  .bvs-v1__stat-rule { display: none; }
}

/* Very narrow phones: let long vendor names wrap rather than overflow */
@media (max-width: 380px) {
  .bvs-v1 { padding: 32px 16px 0; }
  .bvs-v1__win--shop .bvs-browser { max-width: 240px; }
  .bvs-v1__cta-btns .bvs-btn { padding: 13px 16px; letter-spacing: .06em; }
}

/* Respect reduced-motion: JS also stops the auto-rotation. */
@media (prefers-reduced-motion: reduce) {
  .bvs-v1__screen,
  .bvs-v1__tmpl-pill { transition: none !important; }
}

/* --------------------------------------------------------------------------
   3. V2 — THE ANNOTATED TOUR
   Cream background · tabbed · 3 numbered callout annotations per tab
   -------------------------------------------------------------------------- */

.bvs-v2 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bvs-cream);
  color: var(--bvs-ink);
  padding: 80px 80px 120px;
  box-sizing: border-box;
  font-family: var(--bvs-font-body);
}

/* Decorative illustration — upper right, faint */
.bvs-v2__deco {
  position: absolute;
  right: -80px;
  top: -40px;
  width: 360px;
  opacity: .25;
  transform: rotate(8deg);
  pointer-events: none;
  user-select: none;
}

/* ── Header row ── */
.bvs-v2__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  position: relative;
  z-index: 2;
}

.bvs-v2__eyebrow-top {
  font-family: var(--bvs-font-body);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bvs-tomato);
}

.bvs-v2__h2 {
  font-family: var(--bvs-font-display);
  font-weight: 700;
  font-size: 78px;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--bvs-ink);
  margin: 12px 0 0;
  text-wrap: balance;
}
.bvs-v2__h2 em {
  font-style: italic;
  color: var(--bvs-green-dark);
}

.bvs-v2__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--bvs-ink-soft);
  max-width: 620px;
  margin: 18px 0 0;
}

/* Tab switcher pill (top-right of header) */
.bvs-v2__tabs {
  display: inline-flex;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--bvs-border);
  border-radius: var(--bvs-radius-pill);
  box-shadow: 0 6px 18px rgba(20, 30, 10, .06);
  flex-shrink: 0;
  align-self: flex-end;
}
.bvs-v2__tab {
  border: 0;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: var(--bvs-radius-pill);
  font-family: var(--bvs-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  background: transparent;
  color: var(--bvs-ink);
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.bvs-v2__tab--active {
  background: var(--bvs-grad-green);
  color: #fff;
}
.bvs-v2__tab:not(.bvs-v2__tab--active):hover {
  background: rgba(112, 172, 67, .08);
}

/* ── Two-column stage ── */
.bvs-v2__stage {
  margin-top: 56px;
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}

/* Left: blurb + Bea */
.bvs-v2__blurb-col { position: relative; }

.bvs-v2__tab-eyebrow {
  font-family: var(--bvs-font-body);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bvs-teal);
  transition: color .2s;
}

.bvs-v2__tab-title {
  font-family: var(--bvs-font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--bvs-ink);
  margin: 10px 0 0;
  text-wrap: balance;
}

.bvs-v2__tab-blurb {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bvs-ink-soft);
  margin-top: 16px;
}

.bvs-v2__cta-btn { margin-top: 28px; }

/* Bea — pointing, positioned lower-left of blurb column */
.bvs-v2__bea {
  position: absolute;
  left: -40px;
  bottom: -260px;
  width: 260px;
  transform: scaleX(-1);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .12));
  pointer-events: none;
}

/* Dark speech bubble near Bea */
.bvs-v2__bea-bubble {
  position: absolute;
  left: 200px;
  bottom: -70px;
  background: var(--bvs-ink);
  color: var(--bvs-cream);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  transform: rotate(2deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
  white-space: nowrap;
  z-index: 2;
}
.bvs-v2__bea-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--bvs-ink);
}

/* Right: browser + callout overlay */
.bvs-v2__browser-col { position: relative; }
.bvs-v2__browser     { border-radius: var(--bvs-radius-lg); }

.bvs-v2__shot-wrap { position: relative; }

/* Callout overlay — pointer-events none so clicks pass through */
.bvs-v2__callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Numbered pin circle */
.bvs-callout__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c2e86b 0%, #30b2b4 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bvs-font-body);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 0 0 4px rgba(255, 251, 239, .85), 0 6px 12px rgba(0, 0, 0, .18);
  z-index: 4;
}

/* Annotation card */
.bvs-callout__card {
  position: absolute;
  background: var(--bvs-cream);
  border: 1px solid var(--bvs-border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 12px 28px rgba(20, 30, 10, .18);
  width: 200px;
  z-index: 3;
  font-family: var(--bvs-font-body);
}
.bvs-callout__card--left  {
  transform: translate(calc(-100% - 18px), -50%);
}
.bvs-callout__card--right {
  transform: translate(18px, -50%);
}

.bvs-callout__label {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bvs-green-dark);
}
.bvs-callout__body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--bvs-ink);
  margin-top: 4px;
}

/* JS fade transition helper */
.bvs-v2__stage--fading .bvs-v2__blurb-col,
.bvs-v2__stage--fading .bvs-v2__callouts {
  opacity: 0;
  transition: opacity .2s;
}
.bvs-v2__stage .bvs-v2__blurb-col,
.bvs-v2__stage .bvs-v2__callouts {
  opacity: 1;
  transition: opacity .25s .05s;
}

/* ── V2 Responsive ── */
@media (max-width: 1100px) {
  .bvs-v2 { padding: 60px 40px 80px; }
  .bvs-v2__header { grid-template-columns: 1fr; gap: 28px; }
  .bvs-v2__h2 { font-size: 56px; }
  .bvs-v2__tabs { align-self: auto; }
  .bvs-v2__stage { grid-template-columns: 260px 1fr; gap: 32px; }
}
@media (max-width: 800px) {
  .bvs-v2 { padding: 40px 24px 60px; }
  .bvs-v2__h2 { font-size: 42px; }
  .bvs-v2__stage { grid-template-columns: 1fr; }
  .bvs-v2__bea,
  .bvs-v2__bea-bubble { display: none; }
  .bvs-callout__card  { display: none; }
  .bvs-callout__pin   { display: none; }
}
@media (max-width: 480px) {
  .bvs-v2 { padding: 32px 16px 40px; }
  .bvs-v2__h2 { font-size: 32px; }
  .bvs-v2__sub { font-size: 15px; }

  /* Tab pill: full width so buttons don't squeeze */
  .bvs-v2__tabs {
    display: flex;
    width: 100%;
  }
  .bvs-v2__tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 11px;
    text-align: center;
  }

  /* Allow JS-rendered shop images to be naturally tall */
  #bvs-v2-screen img { height: auto !important; }
}