@font-face { font-family:"Recoleta"; src:url("fonts/recoleta-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Recoleta"; src:url("fonts/recoleta-medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Recoleta"; src:url("fonts/recoleta-bold.woff2") format("woff2"), url("fonts/recoleta-bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"PP Frama"; src:url("fonts/PPFramaText-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"PP Frama"; src:url("fonts/PPFramaText-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"PP Frama"; src:url("fonts/PPFramaText-Semibold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }

:root { --ink:#42424A; --ink-soft:#5E6068; --accent:#7FB2C4; --tint:#DDE2EA; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body { font-family:"PP Frama",system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--tint); -webkit-font-smoothing:antialiased; }

/* Full-page backdrop: a soft dusk wash (sea → blush → peach). */
.backdrop { position:fixed; inset:0; z-index:0;
  background:linear-gradient(200deg, #9EC5D3 0%, #E9D3D6 55%, #F7CBBF 100%); }

.page { position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

header { display:flex; align-items:center; justify-content:space-between; padding:24px 36px; }
.brand { font-family:"Recoleta",Georgia,serif; font-weight:700; font-size:24px; color:var(--ink); text-decoration:none; line-height:1; }
nav { display:flex; gap:28px; font-size:14.5px; font-weight:500; }
nav a { color:var(--ink); text-decoration:none; padding-bottom:4px; border-bottom:1.5px solid transparent; }
nav a:hover { border-bottom-color:rgba(66,66,74,0.35); }
nav a.on { border-bottom-color:var(--ink); }

main { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 24px 80px; }

/* Waitlist form (shared) */
.wl { max-width:340px; width:100%; margin:0 auto; }
.wl form { display:flex; gap:8px; }
.wl .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wl input[type=email] { flex:1; min-width:0; height:48px; padding:0 16px; font:inherit; font-size:15px; color:var(--ink);
  background:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.9); border-radius:16px; outline:none; transition:border-color .15s, box-shadow .15s; }
.wl input[type=email]::placeholder { color:#8E9096; }
.wl input[type=email]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,178,196,0.25); }
.wl button { width:48px; height:48px; flex:none; border:0; border-radius:16px; cursor:pointer; background:var(--accent); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 18px rgba(127,178,196,0.35); transition:transform .12s, opacity .15s; }
.wl button:hover { transform:translateY(-1px); }
.wl button:active { transform:translateY(0) scale(0.97); }
.wl button[disabled] { opacity:0.6; cursor:default; transform:none; }
.wl button svg { width:20px; height:20px; }
.wl .done, .wl .err { display:none; margin-top:12px; }
.wl .done { font-size:16px; font-weight:500; color:var(--ink); }
.wl .err { font-size:14px; color:#B7727C; }
.wl.sent form { display:none; }
.wl.sent .done { display:block; animation:rise .45s ease-out both; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

footer { position:relative; z-index:1; display:flex; justify-content:center; gap:22px; padding:0 24px 26px; font-size:13px; font-weight:500; }
footer a { color:var(--ink-soft); text-decoration:none; }
footer a:hover { color:var(--ink); }

@media (max-width:600px) {
  header { padding:22px 22px; }
  .brand { font-size:22px; }
  nav { gap:18px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .wl .done { animation:none !important; } }