/* Free backpack promo popup - graphite shell, white frame, same family as
   the booking and quiz modals. Namespaced .hgb.
   EVERYTHING !important: this renders inside the live WordPress theme, whose
   global button/typography rules otherwise win the cascade (same collision
   the mailer gallery hit). */

.hgb-modal { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important;
  z-index: 2147483001 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; opacity: 0; transition: opacity .15s ease; margin: 0 !important; padding: 0 !important; }
.hgb-modal.open { display: block !important; opacity: 1; }
.hgb-backdrop { position: fixed !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; background: rgba(0,0,0,.94) !important; }
.hgb-box { position: relative !important; max-width: 460px !important; margin: 6vh auto !important;
  background-color: var(--hg-bg, #333333) !important; border: 1px solid #FFFFFF !important;
  border-radius: 0 !important; overflow: hidden !important; text-align: center !important;
  padding: 0 !important; box-shadow: none !important;
  font-family: var(--hg-display, 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif) !important;
  transform: translateY(10px); transition: transform .18s ease; }
.hgb-modal.open .hgb-box { transform: none; }

/* Close: white chip with a black outline, black cross. */
.hgb-close { position: absolute !important; top: 10px !important; right: 12px !important; z-index: 4 !important;
  background: #FFFFFF !important; border: 1px solid #000000 !important; color: #000000 !important;
  font-size: 22px !important; line-height: 1 !important; cursor: pointer !important;
  padding: 0 !important; margin: 0 !important; width: 36px !important; height: 36px !important;
  min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; text-decoration: none !important; }
.hgb-close:hover { background: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; }

/* v2 video carries its own slide-in entrance, so the panel just fades -
   a CSS slide on top of the baked-in slide would double the move.
   Fixed 4:5 panel + cover = the video fills edge to edge; its own white
   margins get cropped instead of showing as bars beside it. */
.hgb-media { background: #FFFFFF !important; overflow: hidden !important;
  aspect-ratio: 4 / 5; margin: 0 !important; padding: 0 !important;
  opacity: 0; transition: opacity .2s ease; }
.hgb-modal.open .hgb-media { opacity: 1; }
.hgb-video { display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; background: #FFFFFF !important; margin: 0 !important; padding: 0 !important; }

/* Copy block styled to the landing page's own system (hg22): mono eyebrow,
   grey body with white emphasis, and the landing's full-width square CTA. */
.hgb-copy { padding: 28px 26px 34px !important; color: var(--hg-ink, #FFFFFF) !important; }
.hgb-eyebrow {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace) !important;
  font-size: 10px !important; font-weight: 400 !important; letter-spacing: .18em !important;
  text-transform: uppercase !important; color: var(--hg-faint, rgba(255,255,255,.34)) !important;
  margin: 0 0 14px !important; }
.hgb-line {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace) !important;
  font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.75 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--hg-mute, rgba(255,255,255,.55)) !important; margin: 0 auto 20px !important;
  max-width: 340px !important; }
.hgb-line b { color: var(--hg-ink, #FFFFFF) !important; font-weight: 400 !important; }
.hgb-count { display: flex !important; align-items: baseline !important; justify-content: center !important;
  gap: 12px !important; margin: 0 0 24px !important; }
.hgb-count .hgb-n {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace) !important;
  font-size: 52px !important; font-weight: 500 !important; letter-spacing: -1px !important;
  line-height: 1 !important; color: var(--hg-ink, #FFFFFF) !important; }
.hgb-count .hgb-lbl {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace) !important;
  font-size: 10px !important; font-weight: 400 !important; letter-spacing: .16em !important;
  color: var(--hg-faint, rgba(255,255,255,.34)) !important; text-transform: uppercase !important; }

/* Same button spec as the landing page .hg-btn (dark section variant):
   block, max 385px, mono 20px in a 63px line inside a 1px border. */
.hgb-btn {
  display: block !important; width: 100% !important; max-width: 385px !important; margin: 0 auto !important;
  background: var(--hg-ink, #FFFFFF) !important; color: #000000 !important;
  border: 1px solid var(--hg-ink, #FFFFFF) !important; border-radius: 0 !important; cursor: pointer !important;
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace) !important;
  font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0 !important;
  text-transform: uppercase !important; line-height: 63px !important; height: 65px !important;
  padding: 0 !important; box-shadow: none !important; text-decoration: none !important;
  min-height: 0 !important; }
.hgb-btn:hover { background: #FFFFFF !important; border-color: #000000 !important; color: #000000 !important; }

/* Eligibility fine print under the CTA. */
.hgb-note {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace) !important;
  font-size: 10px !important; font-weight: 400 !important; letter-spacing: .06em !important;
  color: var(--hg-faint, rgba(255,255,255,.34)) !important; text-transform: none !important;
  margin: 16px 0 0 !important; }

@media (max-width: 600px) {
  .hgb-box { margin: 4vh 14px !important; }
}