/* Shared Join Us packages UI — isolated from admin/onboarding layout styles. */
.join-us-packages {
  --ju-blue: #1E73E6;
  --ju-blue-deep: #1577CB;
  --ju-navy: #10243F;
  --ju-sky: #EAF2FE;
  --ju-green: #1FA463;
  --ju-sand: #E9C25A;
  --ju-ink-soft: #42556E;
  --ju-line: #E1E8F1;
  --ju-shadow: 0 1px 2px rgba(16, 36, 63, .04), 0 12px 30px rgba(16, 36, 63, .07);
  --ju-radius: 18px;
  --ju-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ju-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ju-maxw: 1120px;
  font-family: var(--ju-sans) !important;
  color: #fff !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  isolation: isolate;
}

.join-us-packages *,
.join-us-packages *::before,
.join-us-packages *::after {
  box-sizing: border-box !important;
}

/* Beat admin .main-index / .checklist-box typography resets */
.main-index .join-us-packages :where(h1, h2, h3, h4, h5, h6, p, ul, li, a, button, span, div, label),
.checklist-box .join-us-packages :where(h1, h2, h3, h4, h5, h6, p, ul, li, a, button, span, div, label),
.join-us-packages :where(h1, h2, h3, h4, h5, h6, p, ul, li, a, button, span, div, label) {
  font-family: var(--ju-sans) !important;
  text-transform: none !important;
}

.join-us-packages .wrap {
  max-width: var(--ju-maxw);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.join-us-packages .section {
  padding: 88px 0;
  margin: 0;
}

.join-us-packages .head-center {
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto 40px !important;
  padding: 0 !important;
}

.join-us-packages .eyebrow {
  display: block;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ju-sand) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.main-index .join-us-packages .head-center h2,
.checklist-box .join-us-packages .head-center h2,
.join-us-packages .head-center h2 {
  margin: 0 0 14px !important;
  padding: 0 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem) !important;
  color: #fff !important;
  text-transform: none !important;
}

.main-index .join-us-packages .head-center p,
.checklist-box .join-us-packages .head-center p,
.join-us-packages .head-center p {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

.join-us-packages .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  font-family: var(--ju-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

.join-us-packages .btn-primary {
  background: var(--ju-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(30, 115, 230, .28) !important;
}

.join-us-packages .btn-primary:hover,
.join-us-packages .btn-primary:focus {
  background: var(--ju-blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(30, 115, 230, .34) !important;
  color: #fff !important;
}

.join-us-packages .btn-ghost {
  background: #fff !important;
  color: var(--ju-navy) !important;
  border-color: var(--ju-line) !important;
}

.join-us-packages .btn-ghost:hover,
.join-us-packages .btn-ghost:focus {
  border-color: var(--ju-blue) !important;
  color: var(--ju-blue-deep) !important;
  transform: translateY(-2px);
  background: #fff !important;
}

.join-us-packages .btn:disabled,
.join-us-packages .btn[disabled] {
  opacity: .7 !important;
  cursor: default !important;
  transform: none !important;
}

.join-us-packages .packages {
  background: var(--ju-navy) !important;
  color: #fff !important;
}

.join-us-packages .pkg-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.join-us-packages .pkg {
  background: #fff !important;
  color: var(--ju-navy) !important;
  border-radius: var(--ju-radius) !important;
  padding: 30px 26px !important;
  position: relative !important;
  box-shadow: var(--ju-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
}

.join-us-packages .pkg.featured {
  border: 2px solid var(--ju-sand) !important;
  transform: translateY(-8px);
}

.join-us-packages .pkg.selected {
  border: 2px solid var(--ju-blue) !important;
  outline: none;
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(21, 119, 203, 0.14) !important;
}

.join-us-packages .pkg.selected .btn-primary:disabled {
  opacity: 1;
  cursor: default;
}

.join-us-packages .pkg-flag {
  position: absolute !important;
  top: -13px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--ju-sand) !important;
  color: var(--ju-navy) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  height: auto !important;
  border: none !important;
}

.join-us-packages .pkg-name {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--ju-navy) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.join-us-packages .pkg-price {
  margin: 12px 0 4px !important;
  padding: 0 !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--ju-navy) !important;
  line-height: 1.1 !important;
}

.join-us-packages .pkg-price .amt {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: var(--ju-navy) !important;
  line-height: 1 !important;
}

.join-us-packages .pkg-price .per {
  font-size: 1rem !important;
  color: var(--ju-ink-soft) !important;
  font-weight: 700 !important;
}

.join-us-packages .pkg-fee {
  font-size: .82rem !important;
  color: var(--ju-ink-soft) !important;
  font-weight: 600 !important;
  margin-top: 14px !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.join-us-packages .pkg-fee .mono {
  color: var(--ju-navy) !important;
  font-family: var(--ju-mono) !important;
}

/* Critical: override .checklist-box li (flex row, fixed height, borders) */
.checklist-box .join-us-packages .pkg ul,
.main-index .join-us-packages .pkg ul,
.join-us-packages .pkg ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: grid !important;
  gap: 13px !important;
  width: 100% !important;
}

.checklist-box .join-us-packages .pkg li,
.checklist-box .join-us-packages .pkg li:first-child,
.checklist-box .join-us-packages .pkg li:last-child,
.main-index .join-us-packages .pkg li,
.join-us-packages .pkg li {
  display: flex !important;
  flex-direction: row !important;
  gap: 11px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  background: transparent !important;
}

.join-us-packages .pkg li svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--ju-green) !important;
  flex: none !important;
  margin-top: 2px !important;
  display: block !important;
}

.join-us-packages .pkg .li-main {
  display: block !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: var(--ju-navy) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.join-us-packages .pkg .li-sub {
  display: block !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--ju-ink-soft) !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
}

.join-us-packages .pkg .btn {
  width: 100% !important;
  margin-top: auto !important;
}

.join-us-packages .pkg-billed {
  font-size: .8rem !important;
  color: var(--ju-ink-soft) !important;
  font-weight: 600 !important;
  margin: 5px 0 18px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.join-us-packages .pkg-billed .bill-a {
  display: none;
}

.join-us-packages .pkg-billed .bill-a b {
  color: var(--ju-green) !important;
}

.join-us-packages .pkg-fair {
  max-width: 620px;
  margin: 36px auto 0 !important;
  text-align: center !important;
  font-size: .92rem !important;
  color: rgba(255, 255, 255, .78) !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 14px !important;
  padding: 16px 22px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.join-us-packages .pkg-fair b {
  color: var(--ju-sand) !important;
  font-weight: 800 !important;
}

.join-us-packages .founding {
  max-width: 660px;
  margin: 0 auto 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  background: rgba(233, 194, 90, .13) !important;
  border: 1px solid rgba(233, 194, 90, .45) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: #F1D98C !important;
  text-align: center !important;
  line-height: 1.4 !important;
  height: auto !important;
}

.join-us-packages .founding b,
.join-us-packages .founding .count {
  color: #fff !important;
}

.join-us-packages .founding .live {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--ju-sand) !important;
  flex: none !important;
  animation: ju-pulse 2s ease-out infinite;
  display: inline-block !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@keyframes ju-pulse {
  0% { box-shadow: 0 0 0 0 rgba(233, 194, 90, .55); }
  70% { box-shadow: 0 0 0 9px rgba(233, 194, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 194, 90, 0); }
}

.main-index .join-us-packages .anchor-note,
.join-us-packages .anchor-note {
  text-align: center !important;
  margin: 0 auto 22px !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  max-width: 560px;
  line-height: 1.5 !important;
  padding: 0 !important;
}

.join-us-packages .anchor-note s {
  color: rgba(255, 255, 255, .5) !important;
  text-decoration-thickness: 2px;
}

.join-us-packages .anchor-note .lo {
  color: var(--ju-sand) !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.join-us-packages .billing-cb {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.join-us-packages .billing {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 40px !important;
  padding: 0 !important;
}

.join-us-packages .billing-switch {
  position: relative !important;
  display: inline-flex !important;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  padding: 5px !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
  height: auto !important;
  align-items: center !important;
}

.join-us-packages .billing-switch .knob {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  width: calc(50% - 5px) !important;
  background: var(--ju-blue) !important;
  border-radius: 999px !important;
  transition: transform .25s ease !important;
  z-index: 0 !important;
  box-shadow: 0 4px 12px rgba(30, 115, 230, .4) !important;
  display: block !important;
  height: auto !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.join-us-packages .billing-switch .opt {
  position: relative !important;
  z-index: 1 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, .68) !important;
  transition: color .2s !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  height: auto !important;
  border: none !important;
  margin: 0 !important;
  background: transparent !important;
}

.join-us-packages .billing-switch .opt-m {
  color: #fff !important;
}

.join-us-packages .billing-switch .opt .save {
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: var(--ju-sand) !important;
  margin-left: 5px !important;
}

.join-us-packages .billing-cb:checked ~ .billing .billing-switch .knob {
  transform: translateX(100%);
}

.join-us-packages .billing-cb:checked ~ .billing .billing-switch .opt-m {
  color: rgba(255, 255, 255, .68) !important;
}

.join-us-packages .billing-cb:checked ~ .billing .billing-switch .opt-a {
  color: #fff !important;
}

.join-us-packages .billing-cb:checked ~ .billing .billing-switch .opt-a .save {
  color: #fff !important;
}

.join-us-packages .price-a {
  display: none !important;
}

.join-us-packages .billing-cb:checked ~ * .price-m {
  display: none !important;
}

.join-us-packages .billing-cb:checked ~ * .price-a {
  display: inline !important;
}

.join-us-packages .billing-cb:checked ~ * .bill-m {
  display: none !important;
}

.join-us-packages .billing-cb:checked ~ * .bill-a {
  display: inline !important;
}

@media (max-width: 900px) {
  .join-us-packages .pkg-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .join-us-packages .pkg.featured {
    transform: none;
  }

  .join-us-packages .section {
    padding: 56px 0;
  }
}