:root {
    --dg-navy: #0b2436;
--dg-navy-deep: #071a28;
--dg-off-white: #f4f6f2;
--dg-teal: #e5484d;
--dg-coral: #e8825f;
--border-subtle: rgba(91, 142, 197, 0.25);
    }
body {
margin: 0;
color: var(--dg-off-white);
font-family: 'Inter', sans-serif;
    }
 
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(12px);
        }
to {
opacity: 1;
transform: translateY(0);
        }
    }
 
.join_page {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 1.5rem 5rem;
    }
 
.join_page_header {
text-align: center;
margin-bottom: 3.5rem;
    }
 
.join_eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--dg-off-white);
margin: 0 0 0.75rem;
    }
 
.join_page_header h1 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: clamp(2rem, 4vw, 2.75rem);
margin: 0 0 0.75rem;
    }
 
.join_page_header p {
color: rgba(244, 246, 242, 0.7);
max-width: 45ch;
margin: 0 auto;
    }
 
.join_steps {
display: flex;
flex-direction: column;
gap: 1.75rem;
    }
 
.join_step {
display: grid;
grid-template-columns: 64px 1fr;
gap: 1.25rem;
padding: 1.75rem 1.5rem 2rem;
border: 1px solid var(--border-subtle);
border-radius: 12px;
backdrop-filter: blur(10px);
animation: fadeInUp 1s ease-out;
position: relative;
    }
 
.join_step_number {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--dg-off-white);
font-family: 'JetBrains Mono', monospace;
font-size: 1.1rem;
color: var(--dg-off-white);
    }
 
.join_step_content h3 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1.15rem;
margin: 0 0 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
    }
 
.join_step_content p {
font-size: 0.95rem;
line-height: 1.6;
color: rgba(244, 246, 242, 0.85);
margin: 0 0 0.5rem;
    }
 
.join_step_content ul {
margin: 0.5rem 0 0;
padding-left: 1.1rem;
font-size: 0.9rem;
line-height: 1.6;
color: rgba(244, 246, 242, 0.85);
    }
 
.join_step_content li {
margin-bottom: 0.4rem;
    }
 
.join_step_content a {
color: var(--dg-teal);
    }
 
.join_note {
font-size: 0.85rem;
color: var(--dg-coral);
    }
 
.join_wave {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.5rem;
color: rgba(229, 72, 77, 0.5);
margin: 3rem 0 0;
    }
 
/* ---------- Narrow screens ---------- */
@media screen and (max-width: 600px) {
 
    .join_page {
        padding: 2.5rem 1rem 3rem;
    }
 
    .join_page_header {
        margin-bottom: 2.5rem;
    }
 
    .join_step {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1.25rem 1.1rem 1.5rem;
    }
 
    .join_step_number {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
 
    .join_step_content h3 {
        font-size: 1.05rem;
    }
 
    .join_step_content p,
    .join_step_content ul {
        font-size: 0.88rem;
    }
}