/* Join Our Family — dark glass + marble re-skin of the original membership page. */

.family-page{
  min-height:calc(100vh - 88px);
  padding:clamp(55px,8vw,110px) 20px;
  background:radial-gradient(circle at 10% 20%,rgba(201,164,92,.12),transparent 28%);
}
.family-intro{max-width:900px;margin:0 auto 40px;text-align:center}
.family-intro h1{font:400 clamp(3.5rem,7vw,7rem)/.9 var(--serif);margin:0 0 20px}
.family-intro>p:last-child{font:1.1rem/1.7 var(--serif);color:var(--muted)}

.family-panel{
  max-width:620px;
  margin:auto;
  background:var(--glass);
  padding:30px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.family-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:24px}
.family-tabs button{
  border:0;
  border-bottom:2px solid var(--glass-border);
  padding:12px;
  background:none;
  color:var(--muted);
  font-weight:850;
  cursor:pointer;
}
.family-tabs button.active{border-color:var(--gold);color:var(--gold-pale)}

#family-form{display:grid;gap:16px}
#family-form label{display:grid;gap:7px;font-weight:800;color:#f4efe2}
#family-form input{
  padding:12px;
  border:1px solid var(--glass-border);
  border-radius:7px;
  background:rgba(255,255,255,.07);
  color:var(--ink);
}
#family-form input:focus{outline:2px solid var(--gold);outline-offset:2px}
#family-form input[type="checkbox"]{accent-color:var(--gold);width:18px;height:18px;padding:0}
.form-error{color:#f2a099;font-weight:800;margin:0;min-height:1.2em}

.member-ready{text-align:center}
.member-ready h2{font:400 2.4rem var(--serif)}
.member-ready p{color:var(--muted)}
.member-ready #sign-out{
  display:block;
  margin:22px auto 0;
  border:0;
  background:none;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}
.member-ready #sign-out:hover{color:var(--ink)}