/* ============================================================
   BECOME A VENDOR — the shared band and section head.

   Loaded by every judybees-bv-* section. Every number below that carries a
   comment is derived from `FIGMA/Become a Vendor.svg`, which outranks the
   render; the handful that carry none - the sub-line's 620 measure, the 16
   title margin, the 1.02 and 1.55 line-heights - came off the live DOM at 1440.

   WHY AN ASSET AND NOT A SECTION `{% stylesheet %}`: eight sections share
   these rules, and Shopify concatenates section stylesheets into one file
   anyway — but a snippet (`judybees-bv-head`) has no stylesheet block of its
   own, so its rules need a home that does not depend on which section happens
   to be on the page.
   ============================================================ */

/* 85, NOT 96 - the frame's measure. Band top to eyebrow baseline is 97.50 on
   four bands and 97.62 on the fifth: steps 926.13 to 1023.63, support 1500.13
   to 1597.75, pricing 2037.88 to 2135.38, calculator 4113.96 to 4211.46,
   stories 6021.40 to 6118.90. The eyebrow is 12px on a 1.3 line-height
   (--font-size--text-xxs, below), which sets its baseline ~11.9 under its
   line-box top, so 97.5 - 11.9 = 85.6. The tools band settles it metric-free:
   its eyebrow is a PILL rect at y=5091.9 on a band rect whose top is 5007.4,
   a gap of 84.5 - which rounds to the same 85 the baseline route derives
   independently at 85.6. The first build shipped 96, so the seven bands that
   actually read the token carried ~11 more padding than the frame at each end.
   Not nine: the hero carries no `.bv-band` at all, and support carries the
   class but overrides `padding-block` to 80px above 768 at (0,2,0)
   (judybees-bv-support.liquid:155-172), so above 768 it painted 80 under
   either value. */
:root {
  --bv-band-pad: 85px;
}

/* COLOURS ARE LITERALS HERE, NOT var() CALLS, WITH ONE EXCEPTION. Of the
   --jb-* COLOUR names, only --jb-pink and --jb-amber are declared at :root -
   those two plus the --jb-weight-* family, all in
   assets/judybees-typography.css. (That file's other --jb-* name is
   --jb-fluid-step, the length helper behind every --font-size--* clamp, not a
   colour.) Of the two colours this sheet uses only --jb-pink, plus two of the
   weights. --jb-cream and --jb-ink-soft were declared nowhere, so each var()
   was painting its own fallback while reading as a token binding - the same
   audit finding, and the same fix, as judybees-bv-faq.liquid. Cream is
   #fff8e7, soft ink #5c5852. No new token: the contract forbids inventing
   one. */

/* The bands. Painted on a SIBLING `.section-background`, never on `.section`
   itself and never on a child of it: base.css forces
   `.shopify-section:not(.header-section) :is(.section, .cart-summary)`
   transparent at (0,3,0), and `.section > *` drops every direct child into the
   centre column, so a colour painted either place stops at the page margins. */
.bv-bg--cream { background-color: #fff8e7; }
.bv-bg--white { background-color: #fff; }
.bv-bg--black { background-color: #0a0807; }

/* The frame's page ground, and the warm grey under the calculator. Most of
   this page's sections draw NO band rect of their own in the frame — they sit
   on #FBFBFB, which is a shade off white and reads as one continuous page
   behind the four bands that do exist - two black (hero, tools), one cream
   (support), one parchment (calculator). Painting those sections white
   instead, as the first build did, flattened the whole page.

   Parchment is #f5f2ec, already the theme's warm grey: it is spelled out
   as "parchment" in judybees-cart.css and "bone" in judybees-hive.css. Same
   hex, no new token. */
.bv-bg--page { background-color: #fbfbfb; }
.bv-bg--parchment { background-color: #f5f2ec; }

/* An anchor that takes no space. Only judybees-bv-pricing needs one — every
   other band carries `id="bv-<key>"` on its own root, which pricing cannot
   because its root id is already doing work. Zero height so the jump lands on
   the top edge of the band and nothing shifts. */
.bv-anchor {
  display: block;
  height: 0;
}

.bv-band {
  padding-block: var(--bv-band-pad);
}

.bv-band--black {
  color: #fff;
}

/* ---- the section head --------------------------------------------------- */

.bv-head--center {
  text-align: center;
}

/* Three of the four left-aligned bands are two-column, where the head IS the
   left column — so it takes a measure rather than running the full 1280.
   Maker stories is the fourth: left-aligned with a FULL-WIDTH head, and it is
   the one this cap is for.

   660, NOT 520. Support, tools and the FAQ each sit in a grid track that is
   already narrower than this - 557.6, 602.4 and 380 as the build renders them
   at 1440, where the frame draws 570, 616 and 330 - so the cap never binds
   there; it only binds on maker stories. The first two differ from the frame
   because judybees-layout.css sets `--page-margin: max(64px, 6.5vw)` above
   990, so the centre column is 1252.8 at 1440 rather than the frame's 1280:
   support's 570fr/678fr on a 32 gap renders 557.6, and tools' two 1fr tracks
   on a 48 gap render 602.4. The FAQ head is a fixed 380 - the client's
   380/88/764 split rather than the frame's 330/138/764; the note for it is in
   `judybees-bv-faq.liquid`.

   The frame's stories title ink runs 660.2 wide, and a 520 cap wrapped it
   somewhere the frame does not. The widest left head ink elsewhere in the
   frame is seller tools at ~601 (support is 543 and the FAQ 322), so 660 is
   clear of that too. */
.bv-head--left {
  text-align: left;
}

.bv-head--left .bv-head__title,
.bv-head--left .bv-head__sub {
  max-width: 660px;
  margin-inline: 0;
}

/* PINK, NOT AMBER. Measured off every plain eyebrow in the frame — "how it
   works" @(667,1024), "support & community" @(84,1598), "plans & pricing"
   @(658,2135), "what you'd keep" @(656,4211), "maker stories" @(81,6119) and
   the FAQ's @(85,7070) all carry fill=#EC176F. The first build painted all six
   amber. */
.bv-head__eyebrow {
  display: block;
  color: var(--jb-pink, #ec176f);
  font-size: var(--font-size--text-xxs);
  font-weight: var(--jb-weight-xbold, 800);
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* The dot only exists inside the pill, so it is off everywhere else. */
.bv-head__dot {
  display: none;
}

/* ON THE DARK BAND THE EYEBROW IS THE BRAND PILL, not pink text. The frame
   draws it at 159 x 34, radius 17, white at 25%, with a 6px pink dot 16 in and
   the caps 22 after that — the same `jb-hero__eyebrow` component the hero and
   the CTA card wear. Ported here rather than redrawn so all three stay one
   thing; the width comes from the type, as it does in the hero. */
.bv-band--black .bv-head__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 3rem;
  background-color: #ffffff40;
  color: #fff;
  font-weight: var(--jb-weight-bold, 700);
  gap: 12px;
  letter-spacing: 1.68px;
  line-height: 1.5;
}

.bv-band--black .bv-head__dot {
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--jb-pink, #ec176f);
}

.bv-head__title {
  margin: 16px 0 0;
  font-size: var(--font-size--h2);
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-transform: lowercase;
}

.bv-band--black .bv-head__title {
  color: #fff;
}

.bv-head__sub {
  max-width: 620px;
  margin: 14px 0 0;
  color: #5c5852;
  font-size: var(--font-size--text-m);
  line-height: 1.55;
}

.bv-head--center .bv-head__sub {
  margin-inline: auto;
}

/* On the black band the soft ink disappears; the frame uses white at 72%, the
   same value the hero's sub-line carries. */
.bv-band--black .bv-head__sub {
  color: rgb(255 255 255 / 72%);
}

@media screen and (max-width: 767px) {
  :root {
    --bv-band-pad: 56px;
  }

  .bv-head__sub {
    max-width: none;
  }
}