*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

html,
body{
background:#fff;
color:#202326;

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Helvetica Neue",
Arial,
sans-serif;

-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;

overflow-x:hidden;
}

body{
min-height:100vh;
}

a{
text-decoration:none;
color:inherit;
}

img{
display:block;
width:100%;
height:auto;
}

/* ---------- HEADER ---------- */

.site-header{

position:fixed;

top:0;
left:0;

width:100%;
height:72px;

z-index:1000;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 7vw;

background:rgba(255,255,255,.86);

backdrop-filter:blur(22px);

border-bottom:1px solid #eceff0;

}

.logo{

font-size:14px;
font-weight:700;
letter-spacing:.1em;

}

.nav-links{

display:flex;
gap:24px;

}

.nav-links a{

color:#6b7377;

font-size:14px;

transition:.25s;

}

.nav-links a:hover{

color:#202326;

}

/* ---------- SECTIONS ---------- */

.section{

width:100%;

min-height:100vh;

padding:

118px
7vw
74px;

}

.hero{

display:grid;

grid-template-columns:

.8fr
1.2fr;

gap:6vw;

align-items:center;

}

.world{

display:grid;

grid-template-columns:

1.15fr
.85fr;

gap:6vw;

align-items:center;

border-top:1px solid #edf0f1;

}

.app{

display:grid;

grid-template-columns:

.85fr
1.15fr;

gap:6vw;

align-items:center;

border-top:1px solid #edf0f1;

}

.copy{

max-width:520px;

}

.hero-copy{

justify-self:end;

}

.eyebrow{

margin-bottom:22px;

color:#8c959a;

font-size:12px;

font-weight:700;

letter-spacing:.13em;

text-transform:uppercase;

}

h1{

margin-bottom:26px;

font-size:clamp(96px,13vw,190px);

line-height:.78;

letter-spacing:-.095em;

font-weight:760;

}

h2{

margin-bottom:24px;

font-size:clamp(54px,7vw,104px);

line-height:.9;

letter-spacing:-.075em;

font-weight:700;

}

.hero-line{

margin-bottom:8px;

color:#2d3438;

font-size:clamp(26px,2.8vw,40px);

line-height:1.05;

}

.hero-line.muted{

color:#667176;

}

.coming{

margin-top:28px;

color:#8d969b;

font-size:15px;

}

.body-text{

color:#667176;

font-size:clamp(24px,2.6vw,38px);

line-height:1.16;

}

.hero-image,
.big-image{

display:flex;
align-items:center;
justify-content:center;

}

.hero-image img{

width:min(760px,100%);

max-height:78vh;

object-fit:contain;

}

.big-image img{

max-height:78vh;

object-fit:contain;

}

/* ---------- MOMENTS ---------- */

.moments {
min-height: auto;
padding-top: 100px;
border-top: 1px solid #edf0f1;
}

.moments-copy {
max-width: 920px;
margin: 0 auto;
text-align: center;
}

.moments-copy .body-text {
max-width: 760px;
margin: 0 auto;
font-size: clamp(20px, 2vw, 28px);
}

.moments-image {
max-width: 1120px;
margin: 56px auto 0;
}

.moments-tags {
max-width: 1120px;
margin: 30px auto 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}

.moments-tags span {
padding: 16px 18px;
border: 1px solid #edf0f1;
border-radius: 999px;
color: #667176;
background: #ffffff;
font-size: 15px;
text-align: center;
}

/* ---------- WAITLIST ---------- */

.final-waitlist {
min-height: 78vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-top: 1px solid #edf0f1;
}

.final-copy {
width: 100%;
max-width: 760px;
margin: 0 auto;
}

.waitlist-form {
margin: 36px auto 0;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 520px;
}

.waitlist-form input {
flex: 1;
min-width: 0;
height: 58px;
border: 1px solid #e1e5e7;
border-radius: 999px;
padding: 0 22px;
background: #ffffff;
color: #202326;
font: inherit;
font-size: 16px;
outline: none;
}

.waitlist-form input::placeholder {
color: #a1a9ad;
}

.waitlist-form input:focus {
border-color: #c8d0d4;
}

.waitlist-form button {
height: 58px;
border: 0;
border-radius: 999px;
padding: 0 28px;
background: #202326;
color: #ffffff;
font: inherit;
font-size: 16px;
cursor: pointer;
white-space: nowrap;
}

.note {
margin: 16px 0 0;
color: #8d969b;
font-size: 14px;
}

/* ---------- FOOTER ---------- */

.site-footer {
padding: 42px 7vw 46px;
border-top: 1px solid #edf0f1;
text-align: center;
}

.footer-main-links {
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
}

.footer-main-links a,
.privacy-note {
color: #8d969b;
font-size: 13px;
}

.privacy-note {
margin: 0 0 18px;
}

.site-footer p {
color: #8d969b;
font-size: 13px;
}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
.site-header {
height: 66px;
padding: 0 24px;
}

.nav-links {
gap: 16px;
}

.nav-links a {
font-size: 13px;
}

.nav-links a:nth-child(1),
.nav-links a:nth-child(2) {
display: none;
}

.section {
min-height: auto;
padding: 96px 24px 64px;
}

.hero,
.world,
.app {
grid-template-columns: 1fr;
gap: 44px;
}

.world {
  display: flex;
  flex-direction: column;
}

.world .copy {
  order: 1;
  text-align: center;
  margin: 0 auto 32 px;
  max-width: 620 px;
}

.world .big-image {
  order: 2;
}

.hero-copy {
justify-self: start;
}

h1 {
font-size: 84px;
}

h2 {
font-size: 52px;
}

.hero-line,
.body-text {
font-size: 23px;
}

.hero-image img {
width: 92%;
max-height: none;
}

.moments {
padding-top: 90px;
}

.moments-tags {
grid-template-columns: 1fr;
}

.final-waitlist {
min-height: auto;
padding: 110px 24px 92px;
}

.waitlist-form {
max-width: 100%;
margin-top: 34px;
flex-direction: column;
align-items: stretch;
gap: 14px;
}

.waitlist-form input {
width: 100%;
height: 66px;
padding: 0 24px;
font-size: 19px;
text-align: center;
}

.waitlist-form button {
width: 100%;
height: 66px;
font-size: 18px;
}

.site-footer {
padding: 38px 24px 44px;
}

.footer-main-links {
gap: 18px;
margin-bottom: 14px;
}

.privacy-note {
display: block;
max-width: 320px;
margin: 0 auto 18px;
font-size: 12px;
opacity: 0.78;
}
}

@media (max-width: 520px) {
h1 {
font-size: 78px;
}

h2 {
font-size: 48px;
}

.waitlist-form input,
.waitlist-form button {
height: 64px;
}
}

.legal-page {
min-height: 100vh;
padding: 150px 7vw 90px;
max-width: 900px;
margin: 0 auto;
}

.legal-page h1 {
margin-bottom: 34px;
font-size: clamp(58px, 8vw, 110px);
line-height: 0.9;
letter-spacing: -0.08em;
}

.legal-page p {
max-width: 720px;
margin-bottom: 18px;
color: #657075;
font-size: 20px;
line-height: 1.55;
letter-spacing: -0.02em;
}

.legal-page a {
color: #202326;
text-decoration: underline;
}

@media (max-width: 900px) {
.legal-page {
padding: 130px 24px 70px;
}

.legal-page p {
font-size: 18px;
}
}