.join-section{

padding:60px 7%;

}

.join-box{

max-width:640px;
margin:auto;
background:white;
padding:40px;
border-radius:16px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);

}

.join-box h2{

text-align:center;
margin-bottom:8px;
color:var(--navy);

}

.join-intro{

text-align:center;
color:#666;
margin-bottom:30px;
font-size:15px;

}

.join-group{

margin-bottom:30px;
padding-bottom:10px;
border-bottom:1px solid #eee;

}

.join-group:last-of-type{

border-bottom:none;

}

.join-group h3{

color:var(--navy);
font-size:17px;
margin-bottom:16px;

}

.join-group label{

display:block;
margin:14px 0 6px;
font-size:14px;
color:#333;
font-weight:bold;

}

.join-optional{

color:var(--gray);
font-weight:normal;

}

.join-group input,
.join-group select,
.join-group textarea{

width:100%;
padding:12px 16px;
border:1px solid #ddd;
border-radius:var(--radius-full);
font-size:15px;
font-family:var(--font-sans);

}

.join-group textarea{

border-radius:16px;
min-height:80px;
resize:vertical;

}

#joinForm > button[type="submit"]{

width:100%;
padding:15px;
border:none;
background:var(--blue);
color:white;
font-size:18px;
font-family:var(--font-sans);
cursor:pointer;
border-radius:var(--radius-full);
transition:.3s;

}

#joinForm > button[type="submit"]:hover{

background:var(--navy);

}

@media (max-width: 600px){

  .join-box{
    padding:26px 20px;
  }

}