/* Instrument Sans (SIL Open Font License 1.1), self-hosted so visitors' browsers never contact Google. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #F3F7FC;
  --paper-edge: #E2EAF6;
  --ink: #0B1B3A;
  --ink-2: #44526F;
  --ink-3: #5F6C88;
  --blue: #1F5FE0;
  --blue-deep: #1749BD;
  --cyan: #25C2F2;
  --error: #B8322A;
  --line: rgba(11, 27, 58, .16);

  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 5.5vw, 96px);
  --ease-form: cubic-bezier(.16, .8, .2, 1);
  --ease-out-soft: cubic-bezier(.2, .8, .2, 1);
  /* Damped spring (zeta 0.72): a quick settle with a 4% overshoot, like iOS "snappy". */
  --spring: linear(0, 0.033, 0.115, 0.225, 0.347, 0.47, 0.585, 0.689, 0.778, 0.851, 0.91, 0.955, 0.988, 1.011, 1.026, 1.035, 1.038, 1.038, 1.036, 1.032, 1.027, 1.023, 1.018, 1.014, 1.01, 1.007, 1.004, 1.002, 1);

  /* Frosted glass, used for the form and the confirmation */
  --glass-fill: rgba(255, 255, 255, .58);
  --glass-edge: rgba(255, 255, 255, .92);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(11, 27, 58, .04),
    0 1px 2px rgba(11, 27, 58, .05),
    0 14px 36px -14px rgba(31, 95, 224, .30);
}

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

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fine film grain: hides gradient banding and makes the light feel physical. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.11  0 0 0 0 0.23  0.13 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: rgba(37, 194, 242, .28); color: var(--ink); }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid rgba(37, 194, 242, .7); outline-offset: 3px; border-radius: 6px; }

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

/* ---------- Page frame ---------- */

.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 4vw;
  padding: clamp(20px, 3.2vw, 40px) var(--gutter);
  /* Respect the iPhone notch and home bar. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: max(clamp(20px, 3.2vw, 40px), env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 48% 70% at 71% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 120% 90% at 60% 50%, var(--paper) 40%, var(--paper-edge) 100%);
}

/* Ambient light: two slow glows behind the words and the body, for the glass to frost. */
.page::before,
.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  animation: drift 38s ease-in-out infinite alternate;
}
.page::before {
  left: -8%;
  top: 30%;
  width: 56vw;
  height: 52vh;
  background: radial-gradient(closest-side, rgba(37, 194, 242, .20), rgba(37, 194, 242, 0));
}
.page::after {
  right: 2%;
  top: 8%;
  width: 46vw;
  height: 84vh;
  background: radial-gradient(closest-side, rgba(31, 95, 224, .12), rgba(31, 95, 224, 0));
  animation-duration: 46s;
  animation-direction: alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4vw, -3vh) scale(1.08); }
}

.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.brand, .pitch, .legal { position: relative; z-index: 1; }

.brand {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -.02em;
}
.brand img { display: block; }

.stage { grid-column: 2; grid-row: 1 / -1; min-height: 0; }

.pitch {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  padding: 6vh 0;
}

.legal {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: .8125rem;
  color: var(--ink-3);
}
/* Footer links: a hairline that draws in on hover. */
.legal a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out-soft), color .2s;
}
.legal a:hover { background-size: 100% 1px; color: var(--ink); }

/* ---------- Words ---------- */

h1 {
  font-size: clamp(3rem, 7.4vw, 7.25rem);
  font-weight: 600;
  font-stretch: 100%;
  line-height: .94;
  letter-spacing: -.045em;
  max-width: 7.5em;
  text-wrap: balance;
}
h1:focus { outline: none; }

.lede {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 27em;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Form: one frosted capsule ---------- */

.signup { margin-top: clamp(28px, 3.4vw, 40px); max-width: 30rem; }

.signup-row {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  transition: box-shadow .35s var(--ease-out-soft), border-color .35s var(--ease-out-soft);
}
.signup-row:focus-within {
  border-color: rgba(31, 95, 224, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 4px rgba(37, 194, 242, .16),
    0 18px 44px -14px rgba(31, 95, 224, .40);
}
.signup-row:has(input[aria-invalid="true"]) {
  border-color: rgba(184, 50, 42, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 4px rgba(184, 50, 42, .10),
    0 14px 36px -14px rgba(184, 50, 42, .22);
}

.signup input,
.signup button {
  height: 46px;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
}

.signup input {
  flex: 1;
  min-width: 0;
  padding: 0 12px 0 18px;
  color: var(--ink);
  caret-color: var(--blue);
  background: transparent;
  border: 0;
}
.signup input::placeholder { color: #8994AB; }
/* The capsule shows focus, so the field itself doesn't need an outline. */
.signup input:focus { outline: none; }
/* Stop browser autofill painting a coloured box inside the capsule. */
.signup input:-webkit-autofill,
.signup input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Liquid button: a lit top edge, a sheen on hover, and a spring when pressed. */
.signup button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  padding: 0 22px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3576F0 0%, var(--blue) 58%, #1B55D2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(8, 30, 90, .22),
    0 1px 2px rgba(23, 73, 189, .30),
    0 8px 20px -8px rgba(31, 95, 224, .60);
  transition: transform .55s var(--spring), box-shadow .3s var(--ease-out-soft), filter .3s var(--ease-out-soft);
}
.signup button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .signup button:hover {
    filter: brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .4),
      inset 0 -1px 0 rgba(8, 30, 90, .22),
      0 1px 2px rgba(23, 73, 189, .30),
      0 12px 26px -8px rgba(31, 95, 224, .66);
  }
  .signup button:hover::after { animation: sheen 1s var(--ease-out-soft); }
}
.signup button:active {
  transform: scale(.965);
  filter: brightness(.97);
  transition: transform .12s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}
.signup button:disabled { cursor: progress; }
@keyframes sheen {
  from { left: -70%; opacity: 1; }
  to   { left: 130%; opacity: 1; }
}

/* Loading: three dots that pulse like the body's particles. */
.dots { display: inline-flex; align-items: center; gap: 5px; height: 1em; }
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: dot 1s var(--ease-out-soft) infinite;
}
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot {
  0%, 100% { opacity: .35; transform: scale(.8); }
  40%      { opacity: 1;   transform: scale(1.15); }
}

.signup-error:empty { display: none; }
.signup-error { margin-top: 10px; font-size: .9375rem; color: var(--error); text-wrap: pretty; }

.signup-note { margin-top: 12px; font-size: .875rem; color: var(--ink-3); text-wrap: pretty; }

/* ---------- Confirmation: the form becomes a pill with the email that was added ---------- */

.confirm {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  height: 58px;
  padding: 0 24px 0 8px;
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.confirm svg { flex: none; width: 42px; height: 42px; }
.confirm circle { fill: var(--blue); }
.confirm path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw .55s .45s var(--ease-out-soft) forwards;
}
.confirm-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm.is-entering { animation: confirm-in .9s var(--spring) both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes confirm-in {
  from { opacity: 0; filter: blur(8px); transform: scale(.94); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}

/* ---------- Entrance: the headline forms with the body, everything else blurs into focus ---------- */

@keyframes headline-form {
  from { opacity: 0; filter: blur(14px); font-stretch: 75%; font-weight: 400; letter-spacing: .01em; }
  to   { opacity: 1; filter: blur(0);    font-stretch: 100%; font-weight: 600; letter-spacing: -.045em; }
}
@keyframes blur-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

.js .pitch > *, .js .brand, .js .legal { opacity: 0; }
.ready h1 { animation: headline-form 2.4s .5s var(--ease-form) both; }
.ready .lede, .ready .signup { animation: blur-in 1s 1.6s var(--ease-out-soft) both; }
.ready .brand, .ready .legal { animation: blur-in 1s 1.9s var(--ease-out-soft) both; }

/* ---------- Narrow screens: body above, words below ---------- */

@media (max-width: 899px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto clamp(260px, 44svh, 460px) auto 1fr;
    background:
      radial-gradient(ellipse 80% 40% at 50% 28%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
      radial-gradient(ellipse 140% 100% at 50% 30%, var(--paper) 40%, var(--paper-edge) 100%);
  }
  .page::before { left: -20%; top: 52%; width: 120vw; height: 40vh; }
  .page::after { right: -10%; top: 4%; width: 110vw; height: 50vh; }
  .stage { grid-column: 1; grid-row: 2; }
  .pitch { grid-row: 3; padding: 8px 0 36px; }
  .legal { grid-row: 4; align-self: end; }
}

@media (max-width: 440px) {
  .signup-row { flex-direction: column; border-radius: 26px; }
  .signup input { flex: none; width: 100%; padding: 0 16px; }
}

/* ---------- Accessibility fallbacks ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .signup-row, .confirm { background: rgba(255, 255, 255, .94); }
}
@media (prefers-reduced-transparency: reduce) {
  .signup-row, .confirm { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page::before, .page::after { animation: none; }
  .ready h1, .ready .lede, .ready .signup, .ready .brand, .ready .legal { animation: none; }
  .js .pitch > *, .js .brand, .js .legal { opacity: 1; }
  .signup button::after { display: none; }
  .confirm.is-entering, .confirm path { animation: none; stroke-dashoffset: 0; }
}