/*** GENERATED LOCALLY ***/

/* sections/judybees-bv-hero.liquid */

  /* COLOURS AND MOTION ARE LITERALS HERE, NOT var() CALLS, WITH TWO EXCEPTIONS.
     --jb-pink and --jb-amber are declared at :root in assets/, alongside the
     --jb-weight-* family (judybees-typography.css 76-77 and 66-69), so those
     stay bound. --jb-cream, --jb-ink-soft, --jb-dur-fast and --jb-ease-soft
     are declared nowhere at :root — the last two exist only scoped to
     .jb-shopcat in the catalog section, which never wraps this hero — so
     every reference to them was resolving to its own fallback while reading
     as a token binding. That was an audit finding, and judybees-bv-faq.liquid
     carries the same note. The cream is #fff8e7 and the soft ink #5c5852. */

  .bvhero__bg {
    background-color: #0a0807;
  }

  .bvhero {
    color: #fff;
  }

  /* The frame's band is 837.13 tall and the photo sits wholly inside it: the
     media's own 50 / 726.5 / 60.63 adds back to exactly that, so the band's
     height is the photo's box and `min-height` is only a floor for the copy
     column. */
  .bvhero__grid {
    display: grid;
    min-height: 837px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .bvhero__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 88px;
    padding-inline-end: 64px;
  }

  /* The homepage hero's pill, ported rather than redrawn: 8/16 padding, fully
     round, white at 25%, a 6px pink dot. Frame says 191 x 34 and this lands
     there from the type alone. 20 below it to the h1: the render's
     .bvh-photo__title carries margin 20px 0 0 and the pill none. The frame
     measures 18.5 from the pill's bottom (227 + 34 = 261) to the h1's line
     box top, 279.5 — line 1's baseline 345.7 less Offaly's 0.838em ascent,
     plus the 4.2 of negative half-leading a 0.95 line leaves on an 84px
     face — the same 20 after Figma-import rounding. 24 was supported by
     neither. */
  .bvhero__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin-block-end: 20px;
    padding: 8px 16px;
    border-radius: 3rem;
    background-color: #ffffff40;
    color: #fff;
    font-size: var(--font-size--text-xxs);
    font-weight: var(--jb-weight-bold, 700);
    gap: 12px;
    letter-spacing: 1.68px;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .bvhero__eyebrow-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 3rem;
    background-color: var(--jb-pink, #ec176f);
  }

  /* THE FRAME INVERTS THE SITEWIDE STOP ORDER HERE — see the note on the h1.
     `judybees-heading-dots.js` hands the FIRST stop `.dot-brand-pink` and the
     LAST `.dot-brand-gold`; the frame wants amber first and pink last. The
     class names are what is backwards, not the colours, so this repaints the
     two spans instead of touching a script the footer and every h2 share.
     (0,2,0) beats judybees-typography.css's (0,1,0).

     Assumes two stops, which is what the saved heading has. Edit the heading
     down to one sentence and the single `.dot-brand-pink` would come out
     amber. */
  .bvhero__title .dot-brand-pink {
    color: var(--jb-amber, #fcb217);
  }

  .bvhero__title .dot-brand-gold {
    color: var(--jb-pink, #ec176f);
  }

  .bvhero__title .bvhero__bang {
    color: var(--jb-pink, #ec176f);
  }

  .bvhero__title {
    margin: 0 0 22px;
    color: #fff;
    font-size: var(--font-size--h1);
    letter-spacing: -0.015em;
    line-height: 0.95;
    text-transform: lowercase;
    overflow-wrap: break-word;
  }

  .bvhero__sub {
    max-width: 460px;
    margin: 0 0 31px;
    /* 72% white, which is the render's value — a token would be inventing one. */
    color: rgb(255 255 255 / 72%);
    font-size: var(--font-size--text-m);
    line-height: 1.55;
  }

  .bvhero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .bvhero__btn {
    display: inline-flex;
    height: 56px;
    align-items: center;
    justify-content: center;
    /* 33, measured off the frame's own clear space — 33.08/32.97 on the amber pill
       and 33.29/32.41 on the white one. With text-m below, the two render 167.2 and
       216.0 against the frame's 166 and 218. At 28 on text-s they came out 140.4
       and 181.0 — 25.6 and 37.0 narrow. */
    padding-inline: 33px;
    border-radius: 9999px;
    font-size: var(--font-size--text-m);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    /* 180ms is what the undeclared --jb-dur-fast was already falling back to
       here; the hive stylesheet falls back to 140ms for the same name. */
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bvhero__btn--amber {
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
  }

  /* One amber hover everywhere (Nikol', 8 Sept): the same #f0a50f the maker
     hero and the RSVP button take. A shade, never a swap. */
  .bvhero__btn--amber:hover {
    background-color: #f0a50f;
  }

  .bvhero__btn--white {
    background-color: #fff;
    color: #0a0807;
  }

  .bvhero__btn--white:hover {
    background-color: #ede9e2;
  }

  /* INSET AND ROUNDED, AND IT DOES NOT OVERHANG. Measured off the frame:
     the band is 1440 x 837.13 at y=89, and the photo is 640 x 726.5 at radius
     25 sitting at x=720, y=139. So 139 - 89 = 50 above it and
     837.13 - 50 - 726.5 = 60.63 below it, and the two together are the band.

     The first build read 87 above and a -28 bottom margin, which centred an
     785-tall box in the 837 row and put 113 above the photo against nothing
     below — the gap Nikol' caught on sight, 9 Sept. There is no overhang in
     the frame; that was my invention. */
  .bvhero__media {
    position: relative;
    width: 640px;
    max-width: 100%;
    height: 726.5px;
    margin-block: 50px 60.63px;
    border-radius: 25px;
    overflow: hidden;
  }

  .bvhero__img,
  .bvhero__slot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bvhero__slot {
    background-color: #fff8e7;
  }

  .bvhero__badge {
    position: absolute;
    z-index: 2;
    bottom: 24px;
    left: 24px;
    display: flex;
    max-width: calc(100% - 48px);
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    background-color: #fff;
    color: #0a0807;
    box-shadow: 0 8px 24px -6px rgb(10 8 7 / 18%);
  }

  .bvhero__badge-disc {
    display: flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
    font-size: var(--font-size--text-s);
    font-weight: var(--jb-weight-xbold, 800);
  }

  /* When the maker has a photo the disc IS the photo, same 40px circle. */
  .bvhero__badge-disc--img {
    object-fit: cover;
  }

  .bvhero__badge-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }

    /* OFFALY SHIPS ONE WEIGHT. `offaly-400.woff2` is the only file, declared at
       `@font-face { font-weight: 400 }` in judybees-typography.css:21-23, so asking
       this for 700 did not make it bold — the browser SYNTHESISED one by smearing
       the 400 outlines, which is what Nikol' saw on 12 Sept. 400 is the only weight
       there is to ask for. */
  .bvhero__badge-stat {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h5);
    font-weight: var(--jb-weight-regular, 400);
    line-height: 1;
  }

  .bvhero__badge-cap {
    /* The frame's caption fill: `[text] "first-year sales, ..." fill=#5C5852`. */
    color: #5c5852;
    font-size: var(--font-size--text-xxs);
    line-height: 1.3;
  }

  /* FILL: THE PHOTO TAKES THE WHOLE RIGHT COLUMN. Nikol', 21 Oct 2026, on the
     coming-soon hero: "full right column so the image can take up the entire
     right column", no inset and no padding. Top to bottom of the band, and out
     past the page margin to the viewport's right edge. Become a Vendor keeps
     the frame's inset photo; this only applies with the setting on.
     Anchored to the top so a head is never the part that gets cropped. */
  .bvhero--fill .bvhero__grid {
    align-items: stretch;
  }

  /* `max-width: none` because the base rule's 100% would cap the stretched
     box at the column and swallow the negative margin. */
  .bvhero--fill .bvhero__media {
    width: auto;
    max-width: none;
    height: auto;
    margin-block: 0;
    margin-inline-end: calc(-1 * var(--page-margin, 0px));
    border-radius: 0;
  }

  .bvhero--fill .bvhero__img {
    position: absolute;
    inset: 0;
    object-position: center top;
  }

  @media screen and (max-width: 991px) {
    /* Stacked, copy first — the photograph is the supporting act on a narrow
       screen, and 727px of it before a single word is a wall. */
    /* `minmax(0, 1fr)`, NOT `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so the
       column never shrinks below its content's min-content width — and the media
       below carries an explicit 640px for the frame's geometry. Measured at 375:
       the column became 640 and dragged `.bvhero__left`, the title, the sub and
       both buttons out to 640 with it. The desktop rule was checked and this was
       not; that is the regression.

       The media's own width is released here too, so the photograph fills the
       column instead of forcing it. */
    .bvhero__grid {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
    }

    .bvhero__left {
      padding-block: 56px 40px;
      padding-inline-end: 0;
    }

    /* THE PHOTOGRAPH NEEDS A FOOT. Stacked, the media is the last thing in the
       band, and `margin-block: 0 0` put its bottom edge exactly on the band's —
       measured at a real 375, the gap below the photo was 0.00, so the next
       band started against it with no break at all. Nikol', 12 Sept.

       40 to match the 40 the copy column already carries above it, so the
       photograph sits in the band rather than falling out of the bottom of it. */
    .bvhero__media {
      width: 100%;
      height: auto;
      margin-block: 0 40px;
      aspect-ratio: 4 / 3;
    }

    .bvhero--fill .bvhero__media {
      width: auto;
      margin-block: 0;
      margin-inline: calc(-1 * var(--page-margin, 0px));
      aspect-ratio: 1 / 1;
    }
  }

  @media screen and (max-width: 767px) {
    .bvhero__left {
      padding-block: 40px 32px;
    }

    .bvhero__sub {
      max-width: none;
    }

    /* At 375 the page column is 335 — judybees-layout.css:23 sets
       --page-margin to 20 below 750 — and text-m has clamped to its 1.075rem
       floor, so an unstacked row would run 162.7 + 14 + 209.4 = 386.1, well
       past 335. Those two are DERIVED, not measured: the pills measure 167.2
       and 216.0 at 1440 on 18px type, so scaling the ink inside the fixed 66
       of padding by 17.2/18 gives 162.7 and 209.4. The rule below is what
       stops them ever rendering that way — a row of two wraps ragged, so they
       stack full width instead. */
    .bvhero__ctas {
      flex-direction: column;
      align-items: stretch;
    }

    .bvhero__btn {
      width: 100%;
    }

    .bvhero__badge {
      bottom: 16px;
      left: 16px;
      max-width: calc(100% - 32px);
    }
  }
  /* SHOWN WHOLE, NOT CROPPED: for a cutout on a transparent background (the
     coming-soon merch mockup, 21 Oct 2026). Cropping to fill would slice the
     products at the column edges, so the photo scales to fit inside the
     column with room around it and floats on the band's black. */
  .bvhero--fit-contain .bvhero__img {
    object-fit: contain;
    object-position: center;
  }

  /* Then the band sizes to its content instead of the frame's 837, so the
     copy isn't centered in empty height ("less padding on hero top"), and the
     photo takes the wider column and the photo's own shape, so it draws as
     large as the column allows without a crop ("larger right image") —
     Nikol', 21 Oct 2026. The ratio comes from the image itself, inline. */
  @media screen and (min-width: 992px) {
    .bvhero--fit-contain .bvhero__grid {
      min-height: 0;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .bvhero--fit-contain .bvhero__left {
      padding-block: 56px;
    }

    .bvhero--fit-contain .bvhero__media {
      width: 100%;
      max-width: none;
      height: auto;
      margin-block: 32px;
      aspect-ratio: var(--bvhero-ratio, 1);
    }
  }

  @media screen and (max-width: 991px) {
    .bvhero--fit-contain .bvhero__media {
      aspect-ratio: var(--bvhero-ratio, 4 / 3);
      margin-block: 0 32px;
    }
  }

  /* CENTERED ON A PHONE, when the setting asks. Nikol', 21 Oct 2026, on the
     coming-soon page: "on mobile, the headings need to be centered".
     Become a Vendor leaves it off and keeps the frame's left-aligned copy. */
  @media screen and (max-width: 767px) {
    .bvhero--center-m .bvhero__left {
      align-items: center;
      text-align: center;
    }

    .bvhero--center-m .bvhero__eyebrow {
      align-self: center;
    }

    .bvhero--center-m .bvhero__sub {
      margin-inline: auto;
    }

    .bvhero--center-m .bvhero__ctas {
      justify-content: center;
    }
  }
/* sections/judybees-waitlist-form.liquid */

  /* Head and photos on the left, the form on the right — the support band's
     own 570:678 split, rounded to 5:7. */
  .wlform__grid {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 48px;
  }

  /* The form runs long; the pitch stays in view beside it. */
  .wlform__aside {
    position: sticky;
    top: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Stacked, each at its own proportions. Nikol', 21 Oct 2026: side by side
     cropped both to 3:4 and hid most of each photo. */
  .wlform__photos {
    display: grid;
    gap: 16px;
  }

  .wlform__photo {
    overflow: hidden;
    border-radius: 18px;
  }

  .wlform__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* The 4:5 is on the image, not the frame, so WebKit sizes it the same as
     everyone else — see the note in judybees-waitlist-split. */
  .wlform__photo--capped .wlform__img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .wlform__card {
    min-width: 0;
    padding: 40px;
    border-radius: 22px;
    background-color: #fff;
    color: #0a0807;
  }

  .wlform__form {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .wlform__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .wlform__label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: #0a0807;
    font-size: var(--font-size--text-s);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1.4;
  }

  .wlform__req {
    color: var(--jb-pink, #ec176f);
  }

  .wlform__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* `.jb-hedit__input`, value for value. DOUBLED because base.css's
     `input:not([type='checkbox'], [type='radio'])` is (0,1,1) and paints its
     own border, radius and background over a single class; doubled, this
     is (0,2,0) and wins wherever either sheet loads. */
  .wlform__input.wlform__input {
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgb(10 8 7 / 22%);
    color: #0a0807;
    caret-color: #0a0807;
    font-family: inherit;
    font-size: var(--font-size--text-s);
  }

  .wlform__input.wlform__input::placeholder {
    color: #8a857e;
  }

  .wlform__input.wlform__input:focus-visible {
    outline: 2px solid var(--jb-pink, #ec176f);
    outline-offset: 1px;
  }

  .wlform__input--area.wlform__input--area {
    min-height: 92px;
    line-height: 1.6;
    resize: vertical;
  }

  /* iOS zooms the page on a field under 16px and never zooms back — the
     Hive Leader dialog's guard. */
  @media screen and (max-width: 767px), (pointer: coarse) {
    .wlform__input.wlform__input {
      font-size: 16px;
    }
  }

  .wlform__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .wlform__rows {
    display: grid;
    gap: 10px;
  }

  /* `.frt-reason`, value for value. */
  .wlform__choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgb(10 8 7 / 15%);
    border-radius: 14px;
    color: #0a0807;
    font-size: calc(var(--font-size--text-s) * 0.9333);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wlform__choice:hover {
    border-color: var(--jb-amber, #fcb217);
  }

  .wlform__choice:has(input:checked) {
    border-color: #0a0807;
    box-shadow: inset 0 0 0 1px #0a0807;
  }

  /* A row holds a sentence, so the box sits on its first line rather than
     centered on two. */
  .wlform__choice--row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .wlform__choice--row .wlform__check {
    margin-top: 3px;
  }

  .wlform__check {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0a0807;
  }

  /* `.bv-support__cta`, as a button. */
  .wlform__submit {
    display: inline-flex;
    min-width: 164px;
    height: 56px;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    padding-inline: 28px;
    border: 0;
    border-radius: 9999px;
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
    font-family: inherit;
    font-size: var(--font-size--text-s);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wlform__submit:hover {
    background-color: #f0a50f;
  }

  .wlform__msg {
    padding: 12px 16px;
    border-radius: 10px;
    background-color: #fdecf3;
    color: #0a0807;
    font-size: var(--font-size--text-s);
    line-height: 1.5;
  }

  .wlform__msg ul {
    margin: 0;
    padding-left: 18px;
  }

  .wlform__done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-block: 24px;
    outline: none;
  }

  /* The support card's 52 disc, amber for a success state. */
  .wlform__done-mark {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
  }

  .wlform__done-icon {
    width: 24px;
    height: 24px;
  }

  .wlform__done-title {
    margin: 0;
    font-size: var(--font-size--h4);
    line-height: 1.02;
    text-transform: lowercase;
  }

  .wlform__done-bang {
    color: var(--jb-pink, #ec176f);
  }

  .wlform__done-text {
    margin: 0;
    color: #5c5852;
    font-size: var(--font-size--text-m);
    line-height: 1.55;
  }

  @media screen and (max-width: 989px) {
    .wlform__grid {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 32px;
    }

    .wlform__aside {
      position: static;
    }
  }

  @media screen and (max-width: 767px) {
    .wlform__card {
      padding: 24px 20px;
      border-radius: 18px;
    }

    .wlform__pair {
      grid-template-columns: minmax(0, 1fr);
    }

    .wlform__submit {
      align-self: stretch;
    }
  }

  /* Headings centered on a phone. Nikol', 21 Oct 2026: "on mobile, the
     headings need to be centered". The shared head is left-aligned for the
     desktop split; (0,3,0) here beats judybees-bv.css's (0,2,0) margin rule. */
  @media screen and (max-width: 767px) {
    .wlform .bv-head--left {
      text-align: center;
    }

    .wlform .bv-head--left .bv-head__title,
    .wlform .bv-head--left .bv-head__sub {
      margin-inline: auto;
    }
  }
/* sections/judybees-waitlist-header.liquid */

  /* No hairline under the bar. The dark nav's 12% white rule is dropped
     here so the bar reads as floating over the black hero. Nikol', 21 Oct
     2026: "get rid of it so it looks like the nav is floating over the hero". */
  .wlhead__bg {
    background-color: #0a0807;
  }

  .wlhead__bar {
    display: flex;
    min-height: 89px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .wlhead__logo {
    display: flex;
    min-width: 0;
    align-items: center;
  }

  .wlhead__logo-img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 34px;
  }

  .wlhead__logo-img--invert {
    filter: brightness(0) invert(1);
  }

  .wlhead__logo-text {
    color: #fff;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h6);
  }

  .wlhead__nav {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
  }

  /* `.jb-cnav__cta`, value for value. */
  .wlhead__btn {
    display: inline-flex;
    height: 34px;
    align-items: center;
    padding-inline: 16px;
    border-radius: 9999px;
    font-size: var(--font-size--text-s);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wlhead__btn--amber {
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
  }

  .wlhead__btn--amber:hover {
    background-color: #f0a50f;
  }

  .wlhead__btn--white {
    background-color: #fff;
    color: #0a0807;
  }

  .wlhead__btn--white:hover {
    background-color: #f5f2ec;
  }

  /* The buttons only scroll this page, so the scroll is shown rather than
     jumped, unless the visitor has asked for less motion. */
  @media (prefers-reduced-motion: no-preference) {
    html:has(.wlhead) {
      scroll-behavior: smooth;
    }
  }

  @media screen and (max-width: 767px) {
    .wlhead__bar {
      min-height: 68px;
      gap: 10px;
    }

    .wlhead__logo-img {
      height: 28px;
    }

    .wlhead__nav {
      gap: 6px;
    }

    .wlhead__btn {
      padding-inline: 12px;
      font-size: var(--font-size--text-xs);
    }
  }
/* sections/judybees-waitlist-inside.liquid */

  .wlinside__bg {
    background-color: var(--jb-amber, #fcb217);
  }

  .wlinside {
    color: #0a0807;
  }

  .wlinside__inner {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
  }

  /* The brand mascot itself, centered behind the wall — the same file and
     the same treatment as the pink closing card's watermark: no filter, just
     low opacity. Its amber fill disappears into the amber band and its black
     line work and pink stripes come through darker, which is how the Canva
     bee reads. An earlier pass flattened it with brightness(0), which merged
     the fill and the lines into one solid shape — Nikol', 21 Oct 2026: "you
     didn't use our mascot... bee is distorted". */
  .wlinside__bee {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(620px, 62%);
    height: auto;
    aspect-ratio: 2766 / 2542;
    opacity: 0.14;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .wlinside__title {
    margin: 0;
    color: #0a0807;
    letter-spacing: -0.01em;
    line-height: 0.95;
    text-transform: lowercase;
    white-space: nowrap;
  }

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

  .wlinside__sticker {
    display: inline-flex;
    align-items: baseline;
    padding: 0.32em 0.78em 0.38em;
    border-radius: 9999px;
    background-color: #0a0807;
    color: #fff;
    font-family: var(--font-heading--family);
    font-weight: var(--jb-weight-regular, 400);
    line-height: 1.05;
    white-space: nowrap;
  }

  .wlinside__dot--pink {
    color: var(--jb-pink, #ec176f);
  }

  .wlinside__dot--amber {
    color: var(--jb-amber, #fcb217);
  }

  /* 990 and up: the Canva arrangement. The stage has the Canva band's own
     proportions, 1009 x 557, and every sticker is placed by its center. The
     band's padding is small because the stage already carries the Canva
     band's inner margins. */
  @media screen and (min-width: 990px) {
    .wlinside.bv-band {
      padding-block: 24px;
    }

    .wlinside__stage {
      position: relative;
      aspect-ratio: 1009 / 557;
    }

    .wlinside__title {
      position: absolute;
      top: 16.3%;
      left: 4.4%;
      font-size: 10.6cqw;
      transform: translateY(-50%);
    }

    .wlinside__sticker {
      position: absolute;
      top: var(--y, 50%);
      left: var(--x, 50%);
      font-size: calc(var(--size, 2.8) * 1cqw);
      transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
    }
  }

  /* Below 990: the same stickers, flowing. Half the tilt, and a quarter of
     each sticker's rotated rise given back as margin: half its width (about
     0.27em a character plus the padding) times the sine of the tilt. */
  @media screen and (max-width: 989px) {
    .wlinside__title {
      margin-bottom: 20px;
      font-size: var(--font-size--h2);
      text-align: center;
      white-space: normal;
    }

    .wlinside__wall {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 12px 8px;
    }

    .wlinside__sticker {
      font-size: clamp(15px, calc(var(--size, 2.8) * 6.2px), 23px);
      transform: rotate(calc(var(--tilt, 0deg) * 0.5));
      margin-block: max(0px, calc((var(--chars, 10) * 0.27em + 0.78em) * sin(calc(var(--tilt-abs, 0deg) * 0.5)) * 0.25 - 2px));
    }

    .wlinside__bee {
      width: 90%;
    }
  }
/* sections/judybees-waitlist-owner.liquid */

  .wlowner__stage {
    display: grid;
    grid-template-columns: 32px minmax(0, 380px) minmax(0, 1fr);
    grid-template-rows: 56px minmax(420px, auto) 64px;
  }

  .wlowner__photo {
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
    grid-row: 2;
    border-radius: 25px;
    background-color: #1c1a19;
  }

  .wlowner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wlowner__card {
    position: relative;
    z-index: 1;
    display: flex;
    grid-column: 2;
    grid-row: 1 / -1;
    flex-direction: column;
    align-items: center;
    padding: 28px 28px 30px;
    border-radius: 18px;
    background-color: #fff;
    color: #0a0807;
    box-shadow:
      0 12px 16px -4px rgb(0 0 0 / 8%),
      0 4px 6px -2px rgb(0 0 0 / 3%);
    text-align: center;
  }

  .wlowner__eyebrow {
    margin: 0;
    font-size: var(--font-size--h6);
    font-weight: var(--jb-weight-xbold, 800);
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
  }

  .wlowner__eyebrow-accent {
    color: var(--jb-pink, #ec176f);
  }

  .wlowner__logo {
    display: block;
    width: auto;
    height: 18px;
    margin-top: 8px;
  }

  /* Canva's ring, inside out: amber, a white hairline gap, then pink. */
  .wlowner__avatar {
    display: block;
    overflow: hidden;
    width: 168px;
    height: 168px;
    margin-top: 26px;
    border-radius: 50%;
    box-shadow:
      0 0 0 5px var(--jb-amber, #fcb217),
      0 0 0 8px #fff,
      0 0 0 14px var(--jb-pink, #ec176f);
  }

  /* A portrait photo cropped to the circle keeps a little more above the
     face than below it, so the face lands in the middle of the ring. */
  .wlowner__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
  }

  .wlowner__greeting {
    margin: 28px 0 0;
    font-family: 'Shadows Into Light', cursive;
    font-size: var(--font-size--h5);
    font-weight: 400;
    line-height: 1.1;
    text-transform: none;
  }

  .wlowner__note {
    margin: 10px 0 0;
    font-size: var(--font-size--text-s);
    line-height: 1.5;
  }

  .wlowner__heart {
    color: var(--jb-pink, #ec176f);
  }

  /* Runs the column on a phone and stops at the display rung on a desktop. */
  .wlowner__closing {
    margin: 28px 0 0;
    color: var(--jb-amber, #fcb217);
    font-family: var(--font-heading--family);
    font-size: min(var(--font-size--display-l), 15.5vw);
    letter-spacing: -0.01em;
    line-height: 0.9;
    text-transform: lowercase;
  }

  .wlowner__closing-end {
    color: var(--jb-pink, #ec176f);
  }

  .wlowner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
  }

  /* The hero's pair: 56 tall, fully round, bold text-s. */
  .wlowner__btn {
    display: inline-flex;
    min-width: 166px;
    height: 56px;
    align-items: center;
    justify-content: center;
    padding-inline: 28px;
    border-radius: 9999px;
    font-size: var(--font-size--text-s);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wlowner__btn--amber {
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
  }

  .wlowner__btn--amber:hover {
    background-color: #f0a50f;
  }

  .wlowner__btn--white {
    background-color: #fff;
    color: #0a0807;
  }

  .wlowner__btn--white:hover {
    background-color: #f5f2ec;
  }

  /* Phone: the photo on top, the card lifted 64px over its bottom edge. */
  @media screen and (max-width: 767px) {
    .wlowner__stage {
      grid-template-columns: 16px minmax(0, 1fr) 16px;
      grid-template-rows: auto auto;
    }

    /* The photo carries the 4:3 on a phone, in flow — the same WebKit
       collapse as the waitlist split band, see the note there. */
    .wlowner__photo {
      grid-row: 1;
      align-self: start;
    }

    .wlowner__img {
      position: static;
      display: block;
      height: auto;
      aspect-ratio: 4 / 3;
    }

    .wlowner__card {
      grid-row: 2;
      margin-top: -64px;
    }

    .wlowner__buttons .wlowner__btn {
      flex: 1 1 0;
      min-width: 0;
    }

    .wlowner__closing {
      text-align: center;
    }
  }
/* sections/judybees-waitlist-split.liquid */

  /* Two equal tracks on the 48 gap the seller-tools band uses for its own two
     1fr columns. `stretch` lets the photo take the copy column's height, so
     the band is as tall as its words and the photo crops to fit rather than
     setting the height itself. */
  .wlsplit__grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }

  .wlsplit__grid--photo-right .wlsplit__photo {
    order: 2;
  }

  .wlsplit__photo {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    border-radius: 25px;
  }

  .wlsplit__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wlsplit__img--empty {
    background-color: #f5f2ec;
  }

  .wlsplit__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding-block: 24px;
  }

  .wlsplit__list,
  .wlsplit__chips {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wlsplit__list {
    display: grid;
    gap: 16px;
  }

  .wlsplit__benefit {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* `.bv-support__mark`, value for value. */
  .wlsplit__mark {
    display: flex;
    width: 52px;
    height: 52px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--jb-pink, #ec176f);
    color: #fff;
  }

  .wlsplit__icon {
    width: 24px;
    height: 24px;
  }

  /* `.bv-support__title`, value for value. */
  .wlsplit__benefit-text {
    min-width: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--text-m);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .wlsplit__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* `.frt-reason`'s geometry, white-filled because these sit on a band rather
     than inside a white card. */
  .wlsplit__chip {
    padding: 10px 16px;
    border: 1px solid rgb(10 8 7 / 15%);
    border-radius: 14px;
    background-color: #fff;
    color: #0a0807;
    font-size: calc(var(--font-size--text-s) * 0.9333);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1.3;
  }

  /* `.bv-support__cta`, value for value, hover included. */
  .wlsplit__cta {
    display: inline-flex;
    min-width: 164px;
    height: 56px;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    padding-inline: 28px;
    border-radius: 9999px;
    background-color: var(--jb-amber, #fcb217);
    color: #0a0807;
    font-size: var(--font-size--text-s);
    font-weight: var(--jb-weight-bold, 700);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wlsplit__cta:hover {
    background-color: #f0a50f;
  }

  .bv-band--black .wlsplit__chip {
    border-color: rgb(255 255 255 / 25%);
    background-color: transparent;
    color: #fff;
  }

  /* Stacked below 990, where judybees-layout.css drops the page margin too.
     Copy first: the message is the point and the photo follows it. */
  @media screen and (max-width: 989px) {
    .wlsplit__grid {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 32px;
    }

    /* THE PHOTO CARRIES THE 4:3, NOT THE FRAME. An empty frame sized by
       aspect-ratio, with the photo absolutely positioned over it, collapses
       to zero height in WebKit when the grid stretches it — every iPhone
       browser, Chrome included. Nikol', 21 Oct 2026, on an iPhone: both
       photos missing. In flow, the image's own ratio sizes the frame. */
    .wlsplit__grid .wlsplit__photo {
      order: 2;
      min-height: 0;
      align-self: start;
    }

    .wlsplit__grid .wlsplit__img {
      position: static;
      display: block;
      height: auto;
      aspect-ratio: 4 / 3;
    }

    .wlsplit__copy {
      padding-block: 0;
    }
  }

  @media screen and (max-width: 767px) {
    .wlsplit__copy {
      gap: 24px;
    }

    .wlsplit__mark {
      width: 44px;
      height: 44px;
    }

    .wlsplit__icon {
      width: 20px;
      height: 20px;
    }

    .wlsplit__benefit {
      gap: 16px;
    }

    .wlsplit__cta {
      align-self: stretch;
    }
  }

  /* Headings centered on a phone. Nikol', 21 Oct 2026: "on mobile, the
     headings need to be centered". The shared head is left-aligned for the
     desktop split; (0,3,0) here beats judybees-bv.css's (0,2,0) margin rule. */
  @media screen and (max-width: 767px) {
    .wlsplit .bv-head--left {
      text-align: center;
    }

    .wlsplit .bv-head--left .bv-head__title,
    .wlsplit .bv-head--left .bv-head__sub {
      margin-inline: auto;
    }
  }
/* snippets/password-layout-styles.liquid */

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }