@font-face {
  font-family: "Averia Serif Libre";
  src: url("fonts/averia-serif-libre-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Just Me Again Down Here";
  src: url("fonts/just-me-again-down-here-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* palette (figma variables) */
  --text-primary: #1e252c;
  --text-secondary: #525860;
  --ink: #000000;
  --bg: #ffffff;
  --bg-input: #f2f4f8;
  --bg-button-inverse: #000003;
  --text-hand: #9196a2;
  --text-placeholder: #b0b5bf;

  --font-display: "Averia Serif Libre", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-hand: "Just Me Again Down Here", "Comic Sans MS", cursive;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* design frame: figma "Desktop - 2", 1440 x 1024 */
  --fw: 1440;
  --fh: 1024;
  --stage-h: max(100svh, 640px);
  --u: min(calc(100vw / var(--fw)), calc(var(--stage-h) / var(--fh)));
  --hu: clamp(0.78px, var(--u), 1.25px);
  --note-size: max(17px, calc(24 * var(--u)));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--text-primary);
  color: var(--bg-input);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

/* ---------- stage ---------- */

.stage {
  position: relative;
  height: var(--stage-h);
  overflow: hidden;
  isolation: isolate;
}

.pin {
  position: absolute;
  left: calc(var(--x) * 100% / var(--fw));
  top: calc(var(--y) * 100% / var(--fh));
  translate: -50% -50%;
  rotate: var(--r, 0deg);
}

/* ---------- brand + hero ---------- */

.brand,
.legal {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: lowercase;
}

.brand a,
.legal a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.brand {
  top: max(14px, calc(20 * var(--u)));
}

.hero {
  position: absolute;
  z-index: 2;
  top: calc(321 * 100% / var(--fh));
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(74.338 * var(--hu));
  line-height: calc(90 * var(--hu));
  letter-spacing: -0.06em;
  color: var(--text-primary);
  text-shadow: 0 0 19.146px rgb(0 0 0 / 0.07);
  /* optical centring: the negative tracking leaves dead space on the right */
  padding-left: 0.06em;
}

.hero__tagline {
  margin: 0;
  font-size: max(16px, calc(18 * var(--hu)));
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- waitlist ---------- */

.waitlist {
  position: relative;
  margin: calc(42.5 * var(--hu)) 0 0;
  display: flex;
  gap: calc(12 * var(--hu));
  width: min(calc(455 * var(--hu)), calc(100vw - 40px));
}

.waitlist__input,
.waitlist__button {
  height: calc(58 * var(--hu));
  min-height: 50px;
  border: 0;
  font: inherit;
  /* 16px floor stops iOS zooming into the field on focus */
  font-size: max(16px, calc(16 * var(--hu)));
  line-height: 1.5;
  box-shadow:
    0 1px 8px rgb(0 0 0 / 0.1),
    0 1px 3px rgb(10 13 18 / 0.1);
}

.waitlist__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 calc(18 * var(--hu));
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-primary);
  caret-color: var(--text-primary);
  text-transform: lowercase;
  transition: box-shadow 300ms var(--ease-out);
}

.waitlist__input::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.waitlist__input:focus {
  outline: none;
  box-shadow:
    0 0 0 1.5px var(--text-primary),
    0 4px 14px rgb(0 0 0 / 0.08);
}

.waitlist__input[aria-invalid="true"] {
  box-shadow:
    0 0 0 1.5px var(--text-secondary),
    0 1px 8px rgb(0 0 0 / 0.1);
}

.waitlist__button {
  flex: 0 0 auto;
  width: calc(165 * var(--hu));
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(179.49deg, var(--text-secondary) 21.79%, var(--bg-button-inverse) 98.9%);
  color: var(--bg-input);
  text-transform: lowercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    translate 400ms var(--ease-out),
    box-shadow 400ms var(--ease-out),
    filter 400ms var(--ease-out),
    opacity 300ms var(--ease-out);
}

.waitlist__button:hover:not(:disabled) {
  translate: 0 -2px;
  filter: brightness(1.12);
  box-shadow:
    0 6px 18px rgb(0 0 0 / 0.14),
    0 2px 4px rgb(10 13 18 / 0.1);
}

.waitlist__button:active:not(:disabled) {
  translate: 0 0;
  filter: brightness(0.96);
  transition-duration: 80ms;
}

.waitlist__button:disabled {
  cursor: default;
  opacity: 0.7;
}

/* sits under the form without pushing the layout */
.waitlist__status {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  text-transform: lowercase;
}

/* only appears when Turnstile needs the visitor to interact */
.waitlist__captcha {
  position: absolute;
  top: calc(100% + 44px);
  left: 50%;
  translate: -50% 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- handwritten notes ---------- */

.frame-anchor {
  display: none;
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note {
  z-index: 1;
  font-family: var(--font-hand);
  font-size: var(--note-size);
  line-height: 1.1667;
  text-transform: lowercase;
  color: var(--text-hand);
}

.note--action {
  --x: 231.49;
  --y: 174.4;
  --r: -18.55deg;
  width: 11.6em;
  text-align: center;
  text-wrap: balance;
}

.note--calls {
  --x: 1224.83;
  --y: 231.48;
  --r: 6.73deg;
  width: 10.3em;
  text-align: center;
}

.note--done {
  --x: 390.21;
  --y: 808.42;
  --r: 15.38deg;
  white-space: nowrap;
}

.note--ask {
  --x: 1165.51;
  --y: 744.39;
  --r: -7.84deg;
  width: 9.91em;
}

/* ---------- stickers ---------- */

.sticker {
  z-index: 0;
  pointer-events: none;
  width: calc(var(--w) * var(--u));
}

.sticker picture,
.sticker img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* centres, widths and rotations from figma "Desktop - 2" */
.sticker--ticket { --x: 7.84; --y: 120.11; --w: 183.65; --r: -10.93deg; }
.sticker--telephone { --x: 1126.52; --y: 54.83; --w: 150.5; --r: 9.7deg; }
.sticker--bill { --x: 1386.41; --y: 70.9; --w: 198.93; --r: 27.76deg; }
.sticker--cab { --x: 1350.92; --y: 391.51; --w: 203.42; --r: -9.53deg; }
.sticker--mail { --x: 1428.09; --y: 668.6; --w: 270.36; --r: 16.04deg; }
.sticker--calendar { --x: 1012.07; --y: 905.12; --w: 173.38; }
.sticker--email { --x: 1313.48; --y: 937.99; --w: 172.63; --r: -10.72deg; }
.sticker--compare { --x: 169.94; --y: 3.18; --w: 197.03; --r: 14.24deg; }
.sticker--card { --x: 84.03; --y: 925.78; --w: 203.53; --r: -19.84deg; }
.sticker--bag { --x: 7.02; --y: 643.53; --w: 144.3; --r: 17.63deg; }
.sticker--reminder { --x: 109.61; --y: 375.27; --w: 211.89; }
.sticker--privacy { --x: 215.54; --y: 658.59; --w: 148.54; }
.sticker--todo { --x: 393.94; --y: 905.12; --w: 199.32; --r: 4.07deg; }

/* ---------- footer ---------- */

.legal {
  bottom: max(14px, calc(17 * var(--u)));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 49px;
  white-space: nowrap;
}

.legal > :first-child {
  justify-self: end;
}

.legal > :last-child {
  justify-self: start;
}

/* ---------- phones & portrait tablets: figma "iPhone 16 - 4", pannable ---------- */

/* the 393 x 852 frame is what opens on screen; the canvas extends past it on
   every side (stickers sit off-frame in figma) and the visitor drags to explore */
@media (max-aspect-ratio: 4/5), (max-width: 640px) {
  :root {
    --fw: 393;
    --fh: 852;
    /* horizontal canvas padding around the frame, in frame px; vertically the
       frame is always exactly the browser height */
    --pad-l: 260;
    --pad-r: 220;
    --u: clamp(0.85px, calc(100vw / var(--fw)), 1.15px);
    --hu: var(--u);
    --note-size: calc(24 * var(--u));
  }

  /* pan inside a screen-sized box; if the document itself were wider than the
     screen, mobile browsers would widen the viewport instead of letting it pan */
  .pan {
    position: fixed;
    inset: 0;
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pan::-webkit-scrollbar {
    display: none;
  }

  .stage {
    width: calc((var(--pad-l) + var(--fw) + var(--pad-r)) * var(--u));
    /* --app-h is the screen height captured by pan.js, so the on-screen
       keyboard can't squash the layout when the email field is focused */
    height: var(--app-h, 100%);
    touch-action: pan-x pan-y;
  }

  /* the on-screen frame; pan.js opens the view centred on it */
  .frame-anchor {
    display: block;
    position: absolute;
    left: calc(var(--pad-l) * var(--u));
    top: 0;
    width: calc(var(--fw) * var(--u));
    height: var(--app-h, 100%);
    pointer-events: none;
  }

  .pin {
    left: calc((var(--pad-l) + var(--x)) * var(--u));
    top: calc(var(--y) * 100% / var(--fh));
  }

  .brand,
  .legal,
  .hero {
    left: calc((var(--pad-l) + var(--fw) / 2) * var(--u));
  }

  .brand,
  .legal {
    font-size: 12px;
    line-height: 18px;
  }

  .brand {
    top: calc(8.5 * 100% / var(--fh));
  }

  .legal {
    top: calc(820.3 * 100% / var(--fh));
    bottom: auto;
    display: flex;
    gap: 24px;
  }

  .hero {
    top: calc(213.3 * 100% / var(--fh));
  }

  /* stacked form, 278 wide, 16 apart */
  .waitlist {
    margin-top: calc(41.35 * var(--hu));
    flex-direction: column;
    gap: calc(16 * var(--hu));
    width: calc(278 * var(--hu));
  }

  .waitlist__input,
  .waitlist__button {
    flex: none;
    width: 100%;
  }

  .waitlist__input {
    padding: 0 calc(13 * var(--hu));
  }

  .note--action { --x: -31.04; --y: 184.14; --r: -8.8deg; font-size: calc(18.153 * var(--u)); }
  .note--calls { --x: 420.57; --y: 244.99; }
  .note--ask { --x: 376.75; --y: 621.4; font-size: calc(18.535 * var(--u)); }
  .note--done { --x: 4.7; --y: 700.78; --r: -8.34deg; }

  .sticker--telephone { --x: 299.22; --y: 122.57; --w: 79.5; }
  .sticker--bill { --x: 400.33; --y: 32.01; --w: 112.55; }
  .sticker--compare { --x: 32.12; --y: 68.89; --w: 135.34; }
  .sticker--reminder { --x: -8.72; --y: 303.3; --w: 156.86; }
  .sticker--bag { --x: -182.23; --y: 362.76; --w: 99.86; }
  .sticker--cab { --x: 481.85; --y: 369.29; --w: 111.77; }
  .sticker--ticket { --x: -26.83; --y: 531.57; --w: 120.1; }
  .sticker--mail { --x: 509.5; --y: 547.88; --w: 161.79; }
  .sticker--privacy { --x: -154.04; --y: 630.67; --w: 121.31; }
  .sticker--calendar { --x: 387.06; --y: 722.62; --w: 104.69; }
  .sticker--todo { --x: 12.38; --y: 769.36; --w: 127.0; }
  .sticker--email { --x: 531.67; --y: 771.66; --w: 110.13; }
  .sticker--card { --x: -201.25; --y: 926.07; --w: 203.53; }
}

/* ---------- arrival (driven by arrive.js; .motion is only set without reduced motion) ---------- */

.motion:not(.arrive) .pin,
.motion:not(.arrive) .hero {
  opacity: 0;
}

/* the centre waits for the edges to land before it fades up */
.motion.arrive .hero {
  animation: settle 900ms 600ms var(--ease-out) backwards;
}

@keyframes settle {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}