.links-page{min-height:100vh;min-height:100dvh;display:grid;place-items:start center;padding:1.25rem 1rem 3rem;background:var(--navy)}
.links-card{width:min(100%,32rem);background:var(--cream);color:var(--navy);border-radius:5px;box-shadow:9px 9px 0 #17466b;padding:clamp(1.2rem,5vw,2.2rem);text-align:center}
.links-logo{display:block;width:clamp(150px,52vw,210px);height:auto;margin:0 auto 1rem}
.links-card h1,.links-card h2{font-size:clamp(1.7rem,7vw,2.3rem);letter-spacing:-.02em;margin-bottom:.8rem}
.links-steps{text-align:left;line-height:1.55;margin-bottom:1rem}.links-steps p{margin:0 0 .5rem}
.links-steps ol{list-style:none;margin:0;padding:0}.links-steps li{margin:0 0 .3rem}
#group-invite-form{text-align:left}
#group-invite-form label{display:block;font-weight:750;margin-bottom:.35rem}
#group-invite-form label span{color:var(--rust)}
#group-invite-form input,#group-invite-form select{display:block;margin-top:0;width:100%;min-width:0;padding:.8rem;border:1.5px solid #a9b4ba;border-radius:4px;background:#fff;color:var(--navy);font-size:1rem;font-family:inherit;resize:vertical}
#group-invite-link{margin-bottom:1rem}
.links-label-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.35rem}
#group-invite-form .links-label-row label{margin-bottom:0}
.links-help-open{flex:none;border:1.5px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);padding:.3rem .9rem;font-weight:800;font-size:.9rem;min-height:2.25rem}
.links-help{text-align:left}.links-help p{font-weight:700;line-height:1.5;margin:0 0 .5rem}
.links-help #group-invite-help-title{font-size:1.15rem;outline:none}
.links-help img{display:block;width:100%;height:auto;border-radius:6px;margin:0 0 1rem}
.links-help-back{position:sticky;bottom:.5rem;display:block;width:100%;min-height:3.4rem;border:0;border-radius:4px;background:var(--navy);color:#fff;font-size:1.15rem;font-weight:800;box-shadow:0 5px 0 #0b2236}
.links-help-open:focus-visible,.links-help-back:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
#group-invite-state,#group-invite-phone{margin-bottom:1rem}
.links-notice{border:1px solid #d6c3a7;border-left:4px solid var(--rust);background:#fff7eb;padding:.9rem;font-size:.85rem;line-height:1.55;text-align:left}
.links-submit{display:block;width:100%;border:0;border-radius:4px;background:var(--rust);color:#fff;padding:.9rem 1.35rem;font-weight:800;box-shadow:0 5px 0 #96340c}
.links-submit:hover{background:#9f3305}.links-submit:disabled{opacity:.55;cursor:not-allowed}
.links-result{min-height:1.5rem;margin:1rem 0 0;font-weight:700}.links-result.error{color:#9b360e}
.links-received{text-align:center}.links-received p{color:#26663d;font-weight:700;line-height:1.7}.links-received .links-pray{font-size:2.6rem;line-height:1.35;margin:.4rem 0 1rem}
.links-another{border:2px solid var(--navy);border-radius:4px;background:#fff;color:var(--navy);padding:.7rem 1.1rem;font-weight:750}
#group-invite-form input:focus-visible,#group-invite-form select:focus-visible,.links-submit:focus-visible,.links-another:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.links-received p:focus{outline:none}
@media(max-width:640px){
.links-page{padding:.75rem .75rem 1rem}
.links-card{width:100%;min-height:calc(100vh - 1.75rem);min-height:calc(100dvh - 1.75rem);display:flex;flex-direction:column;padding:.9rem .9rem 1rem}
/* Everything fits one phone screen: a small logo and title, then the form, which sits low in the thumb zone. */
.links-logo{width:clamp(72px,22vw,96px);margin-bottom:.5rem}
.links-card h1,.links-card h2{font-size:1.3rem;margin-bottom:.5rem}
.links-steps{font-size:.9rem;line-height:1.45;margin-bottom:.5rem}
#group-invite-form,.links-received{margin-top:auto;padding-top:.5rem}
#group-invite-form .links-label-row label{margin-bottom:0}
#group-invite-form label{font-size:.9rem;margin-bottom:.2rem}
#group-invite-form input,#group-invite-form select{min-height:2.9rem;font-size:1rem;padding:.55rem .7rem}
#group-invite-phone,#group-invite-state,#group-invite-link{margin-bottom:.7rem}
.links-submit{min-height:3rem;font-size:1.05rem;padding:.6rem 1rem}
.links-result{min-height:1.2rem;margin-top:.6rem;font-size:.9rem}
.links-another{min-height:3.2rem}
}
#group-invite-form input::placeholder{color:#8a96a8;opacity:1}
/* Homepage popup: the same card over a dark backdrop. */
.links-popup{border:0;padding:0;background:transparent;width:min(100% - 1.5rem,32rem);max-width:none;max-height:calc(100dvh - 1.5rem);overflow:auto}
.links-popup::backdrop{background:rgba(0,0,0,.8)}
.links-popup .links-card{position:relative;min-height:0;box-shadow:none}
.links-popup-close{position:absolute;top:.4rem;right:.4rem;width:2.75rem;height:2.75rem;border:0;background:transparent;color:var(--navy);font-size:2rem;line-height:1}
.links-popup-close:focus-visible{outline:3px solid var(--rust);outline-offset:-3px}
html:has(.links-popup[open]){overflow:hidden}
.links-popup:focus{outline:none}
/* On phones the popup fills the whole screen. */
@media(max-width:640px){
.links-popup{width:100%;height:100vh;height:100dvh;max-height:none;margin:0;inset:0}
.links-popup .links-card{min-height:100%;border-radius:0}
}