/* ════════════════════════════════════════════════
   THRYD — components.css
   Buttons · Forms · Waitlist · Modal
   ════════════════════════════════════════════════ */

/* ── WAITLIST / CTA SECTION ─────────────────── */
.cta-wrap{
  padding:160px 52px;
  text-align:center;
  position:relative;overflow:hidden;
}
.cta-bg{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--display);
  font-size:38vw;line-height:1;
  color:rgba(26,23,20,.03);
  white-space:nowrap;pointer-events:none;
  letter-spacing:-.02em;user-select:none;
}
.cta-label{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--rust);display:block;margin-bottom:24px;
  position:relative;
}
.cta-headline{
  font-family:var(--display);
  font-size:clamp(48px,8vw,120px);
  line-height:.88;letter-spacing:.02em;
  margin-bottom:16px;
  position:relative;
}
.cta-sub{
  font-family:var(--serif);font-style:italic;
  font-weight:300;font-size:22px;
  color:var(--muted);margin-bottom:60px;
  position:relative;
}

/* ── FORM ELEMENTS ───────────────────────────── */
.waitlist-form{
  display:flex;gap:0;justify-content:center;
  max-width:480px;margin:0 auto;
  position:relative;
}
.waitlist-input{
  flex:1;padding:16px 22px;
  background:var(--cream);
  border:1px solid rgba(26,23,20,.15);
  border-right:none;
  font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--ink);
  outline:none;
  transition:border-color .2s;
}
.waitlist-input::placeholder{color:var(--muted)}
.waitlist-input:focus{border-color:var(--rust)}
.waitlist-btn{
  padding:16px 28px;
  background:var(--ink);color:var(--cream);
  border:1px solid var(--ink);
  font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  cursor:none;
  transition:background .2s;
}
.waitlist-btn:hover{background:var(--rust);border-color:var(--rust)}
.waitlist-note{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--muted);
  margin-top:16px;opacity:.7;position:relative;
}

/* ── SUCCESS MODAL ───────────────────────────── */
#success-modal{
  display:none;
  position:fixed;inset:0;z-index:99990;
  background:rgba(26,23,20,0.92);
  backdrop-filter:blur(12px);
  align-items:center;justify-content:center;
}

#success-modal-close{
  position:absolute;
  top:32px;
  right:32px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(245,241,235,0.25);
  background:rgba(26,23,20,0.8);
  color:#F5F1EB;
  font-family:var(--mono);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .12s ease-out;
}

#success-modal-close:hover{
  background:var(--rust);
  border-color:var(--rust);
  color:#FFF;
  transform:translateY(-1px);
}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:900px){
  .cta-wrap{padding:80px 24px}
}