/* ==========================================================================
   /usacfo/ "Build, nurture and grow your US business" on phones
   Compare usa-bng-mobile (class mode, partner meeting 2, 22 Oct 2026). Linked on /usacfo/ only
   (variants.json "css"; site/variants.py class_assets). assets/js/usa-bng-mobile.js.

   A (default): below 941px the three cards simply follow one another (site.css .stk__card static).
   B: the PC behaviour on phones too — each card pins under the header, a step lower than the one
      before (site.css: top = head + 20px + i * 12px on PC), and the next card slides up over it,
      so the three pile up as you scroll. A card taller than the room under the header gets a
      lower (negative) pin point from the script: it scrolls through first, then pins with its
      last line above the phone bar. position: sticky only — the scrolling stays native and smooth.
   ========================================================================== */
@media (max-width: 940px) {
  html[data-v-usa-bng-mobile="b"] .stk[data-stack] { gap: 16px; }
  html[data-v-usa-bng-mobile="b"] .stk[data-stack] > .stk__card {
    position: sticky;
    top: var(--stk-top, calc(var(--head-h) + 12px + var(--i, 0) * 10px));
  }
}
@media (max-width: 600px) {
  /* a little more compact, so each card fits under the header on most phones */
  html[data-v-usa-bng-mobile="b"] .stk[data-stack] > .stk__card { padding-top: 24px; padding-bottom: 24px; }
  html[data-v-usa-bng-mobile="b"] .stk[data-stack] > .stk__card .card__list { margin-top: 16px; }
  html[data-v-usa-bng-mobile="b"] .stk[data-stack] > .stk__card .link-arrow { margin-top: 18px !important; }
}
