/* ============ INVITE A FRIEND PAGE (extends styles.css) ============ */

/* ---- intro ---- */
.invite-intro{padding-top:clamp(2.5rem,5vw,4rem)}
.invite-intro__inner{max-width:760px;margin:0 auto;text-align:center}
.invite-intro .eyebrow{display:block;margin-bottom:1rem}
.invite-intro h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:1.2rem}
.invite-intro p{font-size:1.08rem;color:var(--ink);max-width:56ch;margin:0 auto}

/* ---- two referral cards ---- */
.refer{background:var(--tint)}
.refer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.refer-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.refer-card__img{background:var(--peach)}
.refer-card__img img{aspect-ratio:16/9;object-fit:cover;width:100%}
.refer-card__body{padding:2rem 2rem 2.2rem;display:flex;flex-direction:column;flex:1}
.refer-card .eyebrow{display:block;margin-bottom:.6rem}
.refer-card h3{font-size:1.7rem;margin-bottom:.7rem}
.refer-card p{font-size:1rem;margin-bottom:1.4rem}
.refer-card p strong{color:var(--ink)}
.refer-card__cta{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.refer-card__fine{font-size:.78rem;color:var(--muted)}

/* ---- referral form ---- */
.refer-form-section{}
.refer-form-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;background:var(--gold);border-radius:var(--radius);padding:clamp(2.2rem,5vw,3.4rem)}
.refer-form-panel .eyebrow{color:rgba(255,255,255,.8);display:block;margin-bottom:.8rem}
.refer-form-panel h2{color:#fff;margin-bottom:1rem;font-size:clamp(1.9rem,3.4vw,2.6rem)}
.refer-form-panel p{color:rgba(255,255,255,.85);font-size:1.02rem}
.refer-form{background:#fff;border-radius:18px;padding:1.7rem;display:flex;flex-direction:column;gap:1rem}
.refer-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--ink)}
.refer-form input{padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:11px;font:inherit;font-size:.95rem;color:var(--ink)}
.refer-form input:focus{outline:none;border-color:var(--blue)}
.refer-form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

@media(max-width:900px){
  .refer-grid{grid-template-columns:1fr}
  .refer-form-panel{grid-template-columns:1fr}
  .refer-form__row{grid-template-columns:1fr}
}