@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSansVF.ttf") format("truetype");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
/* Figma uses Helvetica Neue LT Std 83 Heavy Extended. It's a paid font, so it's only used
   when the visitor already has it installed; everyone else gets Mona Sans Heavy Expanded,
   the closest free match. To show it to everyone, buy a webfont license and add it here. */
@font-face {
  font-family: "Display";
  src: local("Helvetica Neue LT Std 83 Heavy Extended"), local("HelveticaNeueLTStd-HvEx");
  font-weight: 800 900;
}
@font-face {
  font-family: "Display";
  src: local("Helvetica Neue LT Std 63 Medium Extended"), local("HelveticaNeueLTStd-MdEx");
  font-weight: 400 600;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("fonts/QuicksandVF.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #f1f0f4;
  --ink-soft: rgba(241, 240, 244, 0.82);
  --ink-faint: rgba(241, 240, 244, 0.55);
  --teal: #1d4a55;
  --bg: #07050d;
}

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

html { background: var(--bg); color-scheme: dark; }

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-stretch: 112.5%;
  background: #06000d;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
button, input { font-family: inherit; font-stretch: inherit; }   /* browsers don't pass page fonts to form controls */

/* ---------- Stage: everything is laid out against the 2025px-wide Figma frame ---------- */
/* 1 design px = var(--u). Capped so very wide screens don't over-scale. */
.stage { --u: min(calc(100vw / 2025), 1px); position: relative; overflow: hidden; isolation: isolate; }

.blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blobs i { position: absolute; border-radius: 50%; }
/* Figma vectors: position / size / color / opacity / layer blur (CSS blur ≈ Figma radius ÷ 2). */
.blobs i:nth-child(1) { left: calc(1710*var(--u)); top: calc(229*var(--u));   width: calc(632*var(--u)); height: calc(1462*var(--u)); background:#4222ff; opacity:.55; filter: blur(calc(182*var(--u))); }
.blobs i:nth-child(2) { left: calc(820*var(--u));  top: calc(-26*var(--u));   width: calc(545*var(--u)); height: calc(1262*var(--u)); background:#9a54c1; opacity:.55; filter: blur(calc(182*var(--u))); }
.blobs i:nth-child(3) { left: calc(1570*var(--u)); top: calc(481*var(--u));   width: calc(700*var(--u)); height: calc(787*var(--u));  background:#4222ff; opacity:.55; filter: blur(calc(137*var(--u))); }
.blobs i:nth-child(4) { left: calc(1649*var(--u)); top: calc(1235*var(--u));  width: calc(700*var(--u)); height: calc(787*var(--u));  background:#6e507e; opacity:.55; filter: blur(calc(128*var(--u))); }
.blobs i:nth-child(5) { left: calc(-170*var(--u)); top: calc(-1004*var(--u)); width: calc(545*var(--u)); height: calc(1262*var(--u)); background:#b022ff; opacity:.55; filter: blur(calc(124*var(--u))); }
.blobs i:nth-child(6) { left: calc(-121*var(--u)); top: calc(330*var(--u));   width: calc(545*var(--u)); height: calc(1262*var(--u)); background:#4222ff; opacity:.4;  filter: blur(calc(141*var(--u))); }
.blobs i:nth-child(7) { left: calc(82*var(--u));   top: calc(1222*var(--u));  width: calc(418*var(--u)); height: calc(966*var(--u));  background:#3b7cab; opacity:.4;  filter: blur(calc(146*var(--u))); }

.photo {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(-371*var(--u)); top: calc(-26*var(--u));
  width: calc(3381*var(--u)); height: calc(2154*var(--u));
  background: url("assets/hero-photo.jpg") center / cover no-repeat;
  filter: blur(calc(12*var(--u)));
  opacity: .65; mix-blend-mode: exclusion;
  /* Fade out gently toward the bottom so there's no hard band above the footer. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.2) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.2) 90%, transparent 100%);
}
/* Blend the stage's bottom edge into the footer color. */
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,0,13,0) 0%, rgba(6,0,13,.55) 60%, #06000d 100%);
}

/* ---------- Hero ---------- */

.tagline {
  position: absolute; z-index: 3; top: calc(73*var(--u)); right: calc(80*var(--u));
  width: calc(401*var(--u));
  font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: max(13px, calc(34.47*var(--u))); line-height: 1.13; text-align: right;
  color: #fff; opacity: .85; mix-blend-mode: soft-light;
}

.hero {
  position: relative;   /* no z-index: the wordmark must stack above the photo layer */
  display: flex; flex-direction: column; align-items: center;
  padding: calc(241*var(--u)) 16px 0;
  text-align: center;
}

/* Figma: 83 Heavy Extended, 198.61px, line height 140%, letter spacing -1%, #F4FBFF at 81%.
   Sits above the photo layer, so it isn't tinted. */
.wordmark {
  position: relative; z-index: 4;
  font-family: "Display", "Mona Sans", sans-serif;
  font-weight: 900; font-stretch: 125%;
  font-size: max(64px, calc(198.61*var(--u)));
  line-height: 1.4; letter-spacing: -0.01em;
  color: rgba(244, 251, 255, 0.81);
}

/* Figma "Join waitlist": 413 × 108.77, radius 45.19, white fill with 3.72 background + layer
   blur (no outline), text 83 Heavy Extended 40.82 / 140% / -1% #184050.
   Everything is in em so it scales with the font size. The pink/blue tint comes from the photo
   layer's Exclusion blend on top, exactly like in Figma. */
.cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Display", "Mona Sans", sans-serif;
  font-weight: 900; font-stretch: 125%;
  font-size: max(20px, calc(40.82*var(--u)));
  line-height: 1.4; letter-spacing: -0.01em;
  color: rgba(24, 64, 80, 0.85);   /* #184050 at 85% */
  text-decoration: none;
  width: 10.118em; height: 2.665em;
  padding: 0.22em 0 0;   /* Mona Sans sits high in its line box; nudge the label to optical center */
  border: 0; border-radius: 1.107em; cursor: pointer;
  /* Solid white pill. (The Figma blurs were dropped: blurring a clipped fill leaves square,
     dark fringes in Safari, and the fill is opaque so the background blur never showed.) */
  background: #fff;
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* force Safari to clip to the radius */
  margin-top: calc(27*var(--u));
}
.cta:hover { transform: translateY(-2px); }
.cta { transition: transform .15s ease; }

/* ---------- Countdown ---------- */

.countdown {
  position: relative; z-index: 4;   /* above the photo layer, like the wordmark */
  margin-top: max(20px, calc(44*var(--u)));
  color: rgba(244, 251, 255, 0.81);
  font-family: "Display", "Mona Sans", sans-serif; font-stretch: 125%;
}
.countdown-label {
  font-weight: 700; font-size: max(11px, calc(18*var(--u)));
  letter-spacing: 0.18em; text-transform: uppercase; opacity: .75;
  margin-bottom: 0.6em;
}
.countdown-units { display: flex; justify-content: center; gap: max(14px, calc(40*var(--u))); }
.countdown-units div { display: flex; flex-direction: column; align-items: center; min-width: 2.2em; }
.countdown-units span {
  font-weight: 900; font-size: max(30px, calc(72*var(--u))); line-height: 1.05;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.countdown-units small {
  font-weight: 600; font-size: max(10px, calc(15*var(--u)));
  letter-spacing: 0.14em; text-transform: uppercase; opacity: .6; margin-top: 0.3em;
}

/* ---------- ONLY FRIENDS ---------- */

.only {
  position: relative; z-index: 3;
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: calc(340*var(--u)); line-height: 1.13; letter-spacing: calc(-8.61*var(--u));
  /* Centered in a box wider than the screen, so the words bleed off both sides evenly. */
  white-space: nowrap; text-align: center;
  width: 160%;
  margin: calc(126*var(--u)) 0 0 -30%;
  color: #fff; opacity: .4; mix-blend-mode: soft-light;
  user-select: none;
}

/* ---------- Story + phones ---------- */

.story {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: calc(784*var(--u)) 1fr;
  gap: calc(110*var(--u)); align-items: start;
  padding: calc(80*var(--u)) calc(60*var(--u)) calc(120*var(--u)) calc(160*var(--u));
}

.copy { font-family: "Display", "Mona Sans", sans-serif; font-stretch: 125%; letter-spacing: -0.01em; color: #f4fbff; }
.copy .lead { font-size: max(20px, calc(35*var(--u))); font-weight: 500; line-height: 1.4; margin-bottom: 0.86em; }
.copy p { font-size: max(15px, calc(27*var(--u))); font-weight: 500; line-height: 1.4; margin-bottom: 1.1em; }
.copy .cta { font-size: max(16px, calc(24*var(--u))); margin-top: 0.4em; }

.phones {
  display: block; width: 100%; height: auto;
  /* The Figma export is cut flat at the bottom; fade it out instead. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* ---------- Waitlist dialog ---------- */

dialog {
  margin: auto; width: min(440px, calc(100% - 32px));
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 28px;
  background: rgba(20, 16, 36, 0.92); color: var(--ink);
  padding: 32px 28px 28px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog h2 { font-weight: 800; font-stretch: 125%; font-size: 28px; margin-bottom: 8px; }
dialog p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
dialog form { display: grid; gap: 12px; }
dialog input {
  font: inherit; font-size: 17px; color: var(--ink);
  padding: 15px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08);
}
dialog input:focus { outline: 2px solid #c8cbe8; outline-offset: 1px; }
dialog .cta { font-size: 18px; width: 100%; margin-top: 4px; }
dialog .fine { font-size: 12px; line-height: 1.45; color: var(--ink-faint); margin: 2px 0 0; }
dialog .fine a { color: var(--ink-soft); }
dialog .status { min-height: 22px; font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }
dialog .close {
  position: absolute; top: 14px; right: 16px; border: 0; background: none;
  color: var(--ink-faint); font-size: 26px; cursor: pointer;
}

/* ---------- Footer + text pages ---------- */

footer {
  display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: center;
  padding: 32px 20px 48px; font-size: 14px; color: var(--ink-faint);
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

.page { max-width: 760px; margin: 0 auto; padding: 72px 24px 40px; }
.page .back { font-size: 15px; color: var(--ink-faint); text-decoration: none; }
.page h1 { font-weight: 800; font-stretch: 125%; font-size: clamp(38px, 6vw, 56px); margin: 18px 0 8px; }
.page .updated { color: var(--ink-faint); font-size: 14px; margin-bottom: 36px; }
.page h2 { font-weight: 700; font-size: 21px; margin: 32px 0 10px; }
.page p, .page li { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.page ul { padding-left: 22px; margin: 8px 0; }
.page li { margin: 6px 0; }
.page .card {
  margin-top: 24px; padding: 22px 24px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
}

/* ---------- Phone width ---------- */

@media (max-width: 820px) {
  /* Phones: scale the design up 2.2× so it isn't tiny, and let the photo cover the whole page. */
  .stage { --u: calc(100vw / 920); }
  .photo { left: 0; top: 0; width: 100%; height: 100%; }
  .tagline { top: 18px; right: 16px; width: auto; }
  .hero { padding-top: 120px; }
  .only { width: 160%; margin: 40px 0 0 -30%; font-size: 16vw; letter-spacing: -0.03em; }
  .story { grid-template-columns: 1fr; padding: 16px 16px 56px; gap: 24px; }
}