/* css/hero-join.css - "JOIN <class>" button and class chips under the hero buttons (home page) */
.ss-join-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:26px 0 8px}
.ss-join{display:inline-flex;align-items:center;gap:12px;padding:14px 34px;border-radius:999px;background:#fff;color:var(--stella-navy);font-weight:700;letter-spacing:.04em;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .2s,background .2s}
.ss-join:hover{background:var(--stella-accent);transform:translateY(-2px)}
.ss-join .fa{transition:transform .2s}
.ss-join:hover .fa{transform:translateX(4px)}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ss-chip{padding:7px 14px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(0,26,53,.4);color:#fff;font:600 .8rem 'Poppins',sans-serif;cursor:pointer;transition:background .2s,color .2s}
.ss-chip:hover{background:rgba(255,255,255,.25)}
.ss-chip.is-on{background:#fff;border-color:#fff;color:var(--stella-navy)}
.ss-join:focus-visible,.ss-chip:focus-visible{outline:3px solid var(--stella-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ss-join,.ss-join .fa,.ss-chip{transition:none}}