@font-face{font-family:Inter;src:url('/assets/inter-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/inter-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/inter-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url('/assets/nunito-black.ttf') format('truetype');font-weight:900;font-display:swap}
:root{color-scheme:light;--cream:#fff8ef;--ink:#191919;--orange:#ff5a1f;--body:#403934}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,sans-serif}
/* Keep the composition together instead of distributing spare viewport height between sections. */
.page{max-width:1600px;min-height:100svh;margin:auto;padding:32px 64px 24px;display:flex;flex-direction:column;align-items:center}
.header{height:48px;margin-bottom:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.launch-badge{background:#f4e9db;box-shadow:0 5.5px 0 #998a76;border-radius:100px;padding:10px 16px;font-size:11px;font-weight:500;letter-spacing:1.32px;line-height:13px;text-transform:uppercase;transform:translateY(-2.75px)}
.hero{width:100%;display:flex;flex:0;flex-direction:column;align-items:center;gap:24px}
.headline{min-height:202px;display:flex;align-items:center;justify-content:center;width:100%}
h1{margin:0;font-family:Nunito,Arial,sans-serif;font-weight:900;font-size:clamp(48px,6.112vw,88px);line-height:1;letter-spacing:-.04em;text-align:center}
h1 span{color:var(--orange);white-space:nowrap}
.friends{display:block;width:min(100%,1056px);aspect-ratio:1056/336;flex-shrink:0}
.friends img{display:block;width:100%;height:100%}
.signup{width:min(100%,760px);position:relative;text-align:center}
.signup>p{margin:0;color:var(--body);font-size:18px;line-height:28px}
.mobile-message{display:none}
form{display:flex;gap:12px;max-width:588px;margin:14px auto 0}
input,button{font-family:inherit;font-size:16px;height:56px;border-radius:100px}
input{min-width:0;flex:1;background:#fff;border:1px solid #cfc1b2;padding:16px 22px;color:var(--ink)}
input::placeholder{color:#756b60;opacity:1}
button{width:156px;flex-shrink:0;border:0;border-right:5px solid #312d2d;border-bottom:5px solid #312d2d;background:var(--orange);color:var(--ink);font-weight:600;cursor:pointer;transition:filter .15s,transform .15s}
button:hover{filter:brightness(1.04)}
button:active{transform:translate(2px,2px)}
button:disabled{cursor:wait;opacity:.7}
:focus-visible{outline:3px solid #7434f5;outline-offset:4px}
input[aria-invalid=true]{border-color:#ad3015}
.signup>.form-status{position:absolute;top:100%;left:0;width:100%;padding-top:10px;font-size:13px;line-height:18px}
.form-status[data-state=error]{color:#ad3015}
footer{height:28px;margin-top:auto;display:flex;align-items:center;justify-content:center;font-size:12px;color:#72695f;flex-shrink:0}
.hero{margin-bottom:48px}
.is-success .hero{gap:32px}
.is-success .headline{min-height:0}
.success{width:min(100%,760px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;outline:none}
.success-icon{width:56px;height:56px;border-radius:100px;background:var(--orange);display:flex;align-items:center;justify-content:center}
.success-icon picture,.success-icon img{display:block;width:24px;height:24px}
.success-copy{display:flex;flex-direction:column;gap:8px;width:100%}
.success h2{margin:0;font-family:Nunito,Arial,sans-serif;font-weight:900;font-size:28px;line-height:1.2}
.success p{margin:0;font-size:18px;line-height:1.4;color:var(--body)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:601px) and (max-width:1100px){.page{padding-inline:32px}.headline{min-height:160px}.signup>p{font-size:16px}}
@media (max-width:600px){
 .page{min-height:100svh;padding:8px 20px 32px;gap:32px;justify-content:flex-start}
 .header{height:40px;margin-bottom:0}.launch-badge{padding:8px 12px;font-size:9px;line-height:11px;letter-spacing:1.08px}
 .hero,.is-success .hero{flex:0;gap:24px;justify-content:flex-start;max-width:420px;margin-bottom:0}
 .headline{min-height:0}h1{font-size:clamp(26px,8.143vw,40px);line-height:1;letter-spacing:-.04em}
 .friends{width:100%;aspect-ratio:353/113.183}.friends img{width:101.28%;max-width:none;margin-left:-.57%}
 .signup{width:100%;margin-top:0}.desktop-message{display:none}.signup>.mobile-message{display:block;max-width:337px;margin:auto;font-size:16px;line-height:24px}
 form{flex-direction:column;margin-top:24px;max-width:none;gap:12px}input{flex:auto;width:100%}button{width:100%}
 footer{margin-top:auto;padding-top:0}.signup>.form-status{position:static;padding-top:10px;min-height:28px}
 .success{gap:8px;width:100%}.success-icon{width:44px;height:44px}.success-icon picture,.success-icon img{width:18px;height:18px}
 .success-copy{gap:4px}.success h2{font-size:22px}.success p{font-size:14px}
}
