html{scroll-padding-top:24px}
main{flex:1;width:100%;max-width:1120px;margin:0 auto}
h1,h2{margin:0;text-wrap:balance}
h1{font-size:40px;line-height:1.1}
h2{font-size:28px;line-height:1.15}
p{margin:0;text-wrap:pretty}
.hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero{display:flex;flex-direction:column;gap:40px;padding:32px 24px 40px}
.hero-text{display:flex;flex-direction:column;gap:20px}
.lead,.row-text p,.cta p{color:var(--second)}
.note{font-size:14px;color:var(--second)}
.phone{display:block;width:min(298px,100%);height:auto;margin:0 auto}
.row .phone{width:min(273px,100%)}
.row{display:flex;flex-direction:column;gap:24px;padding:40px 24px}
.row-text{display:flex;flex-direction:column;gap:12px}
.cta{display:flex;flex-direction:column;gap:16px;padding:48px 24px}
.join{display:flex;flex-direction:column;gap:8px}
.fields{display:flex;flex-direction:column;gap:12px}
.field{width:100%;min-height:56px;padding:0 24px;border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--ink);font:400 17px Manrope,system-ui,sans-serif}
.field::placeholder{color:var(--second)}
.field:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.field[aria-invalid=true]{border-color:var(--ink)}
.join .pill{min-height:56px;padding:0 28px;white-space:nowrap}
.pill:focus-visible,.ghost:focus-visible,.lang:focus-visible,.foot a:focus-visible,.brand:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.error{font-size:14px;color:var(--ink)}
.error:empty{display:none}
.done{display:none;flex-direction:column;gap:4px;min-height:56px;justify-content:center;outline:none}
.done b{font-family:Unbounded,system-ui,sans-serif;font-weight:800;font-size:20px;line-height:1.2}
.done span{color:var(--second)}
.join.sent .fields,.join.sent .error{display:none}
.join.sent .done{display:flex;animation:rise var(--mid) var(--ease) both}
.error:not(:empty){animation:fade var(--fast) var(--ease) both}
.swatches{overflow:hidden;padding:8px 0 24px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:12px;width:max-content;animation:drift 90s linear infinite}
.track i{flex:none;width:44px;height:44px;border-radius:999px;background:var(--c)}
.swatches:hover .track{animation-play-state:paused}
.hero-text>*,.phone-hero{animation:rise var(--slow) var(--ease) both}
.hero-text>:nth-child(2){animation-delay:70ms}
.hero-text>:nth-child(3){animation-delay:140ms}
.hero-text>:nth-child(4){animation-delay:210ms}
.phone-hero{animation-delay:120ms}
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.phone.reveal{transition-delay:80ms}
.reveal.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fade{from{opacity:0}}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.hero-text>*,.phone-hero,.track,.join.sent .done,.error:not(:empty){animation:none}
.reveal{opacity:1;transform:none;transition:none}
}
@media (min-width:900px){
.hero{flex-direction:row;align-items:center;justify-content:space-between;gap:96px;padding:72px 40px 40px}
.hero-text{max-width:620px;gap:24px}
h1{font-size:68px;line-height:1.05}
h2{font-size:40px}
.lead,.row-text p,.cta p{font-size:20px}
.hero .join,.note{max-width:520px}
.phone-hero{width:323px;margin:0;flex:none}
.row{flex-direction:row;align-items:center;justify-content:space-between;gap:120px;padding:56px 40px}
.row-flip{flex-direction:row-reverse}
.row-text{max-width:440px;gap:16px}
.row .phone{width:290px;margin:0;flex:none}
.fields{flex-direction:row}
.field{flex:1;min-width:0}
.cta{align-items:center;gap:24px;padding:72px 0;margin-top:40px;border-top:1px solid var(--hair);text-align:center}
.cta .join{width:520px;align-items:center}
.cta .fields{width:100%}
.swatches{padding:24px 0 40px}
.track{gap:16px}
.track i{width:56px;height:56px}
}