/* ===== TOKENS ===== */
#bolt-join-box{
  --blue:var(--mp-blue);
  --pink:var(--mp-pink);
  --ink:var(--mp-ink);
  --outline:rgba(255,255,255,.18);
}

/* ===== LAYOUT ===== */
#bolt-join-box .bj-wrap{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

/* Card */
#bolt-join-box .bj-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:18px;
  background:
    radial-gradient(120% 160% at 75% 0%, var(--blue) 0%, #21307f 60%, #1a2664 100%);
  color:var(--ink);
  box-shadow: 0 24px 60px rgba(14,22,53,.45);
  border:1px solid rgba(255,255,255,.08);
  padding:48px 28px;
}
@media(min-width:900px){
  #bolt-join-box .bj-card{ padding:64px 72px; }
}

/* MOBILE polish (same style, just feels more natural) */
@media(max-width:720px){
  #bolt-join-box .bj-wrap{ margin:28px auto; padding:0 16px; }
  #bolt-join-box .bj-card{ padding:34px 18px; border-radius:16px; }
  #bolt-join-box .bj-sub{ font-size:15px; line-height:1.8; }
  #bolt-join-box .bj-cta{ width:100%; max-width:360px; text-align:center; padding:12px 22px; }
}

/* sheen sweep */
#bolt-join-box .bj-card::after{
  content:"";
  position:absolute;
  inset:-20% -60%;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform:translateX(-55%) skewX(-18deg);
  animation:bjSheen 7s linear infinite;
  pointer-events:none;
}
@keyframes bjSheen{
  0%{ transform:translateX(-55%) skewX(-18deg); }
  100%{ transform:translateX(55%) skewX(-18deg); }
}

/* mouse glow */
#bolt-join-box .bj-mouse{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(380px 380px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%);
  filter:blur(55px);
  opacity:.9;
}

/* ===== TYPE ===== */
#bolt-join-box h1,#bolt-join-box h2,#bolt-join-box h3{
  font-family:"DM Serif Display",serif;
  font-weight:400;
  color:#fff;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
#bolt-join-box .bj-head{ text-align:center; margin-bottom:14px; }
#bolt-join-box .bj-head h2{ font-size:44px; line-height:1.12; }
@media(max-width:520px){
  #bolt-join-box .bj-head h2{ font-size:36px; }
}

#bolt-join-box .bj-sub{
  font-family:"Montserrat",sans-serif;
  color:#fff;
  margin:10px auto 0;
  line-height:1.85;
  font-size:16px;
  max-width:980px;
  text-align:center;
}
#bolt-join-box em{ font-style:normal; opacity:.98; }

/* ===== CTA ===== */
#bolt-join-box .bj-cta{
  display:inline-block;
  margin:26px auto 0;
  padding:12px 30px;
  background:linear-gradient(90deg, var(--pink), var(--blue));
  color:#fff;
  text-decoration:none;
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  border-radius:12px;
  border:1px solid var(--outline);
  box-shadow:0 12px 26px rgba(37,52,153,.38), 0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .2s ease, box-shadow .28s ease, filter .2s ease;
}
#bolt-join-box .bj-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 36px rgba(208,36,121,.45), 0 0 0 1px rgba(255,255,255,.22) inset;
  filter:brightness(1.03);
}
#bolt-join-box .bj-cta:active{ transform:translateY(0); }

/* center CTA */
#bolt-join-box .bj-cta{ position:relative; left:50%; transform:translateX(-50%); }
#bolt-join-box .bj-cta:hover{ transform:translateX(-50%) translateY(-2px); }

/* make sure all text stays white inside */
#bolt-join-box, #bolt-join-box p, #bolt-join-box a{ color:#fff !important; }

/* Live's outer container is 498px: the 398px card plus the wrap's 40px margins
   and 10px of section padding. Without a block formatting context those margins
   collapse out of the section and it measures 398px. */
#bolt-join-box { display: flow-root; padding-block: 10px; }