/*
 * The waitlist pages. Values come from tokens.css (--wl-*), never brand.css
 * directly and never raw hex, so the palette stays in one place.
 */

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

/* The page colour reaches behind the phone's status bar and Safari's
   toolbar too (viewport-fit=cover in layout.mustache). */
html {
  background: var(--wl-page);
}

/* Sideways on a phone, the side padding keeps content clear of the notch. */
body {
  margin: 0;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  min-height: 100vh;
  background: var(--wl-page);
  color: var(--wl-text);
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--wl-link);
}

:focus-visible {
  outline: 2px solid var(--wl-focus);
  outline-offset: 2px;
}

/* --- Layout ------------------------------------------------------------------ */

.page {
  max-width: var(--wl-page-width);
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) var(--wl-gutter);
}

.brand {
  display: inline-block;
  margin: 0 0 1.5rem;
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-lede);
  color: var(--wl-text);
  text-decoration: none;
}

.card {
  background: var(--wl-surface);
  border-radius: var(--wl-radius-card);
  box-shadow: var(--wl-shadow-card);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wl-border);
}

/* --- Type ---------------------------------------------------------------------- */

h1,
h2 {
  font-family: var(--wl-font-display);
  font-weight: 400;
  letter-spacing: var(--wl-tracking-display);
  line-height: 1.1;
}

h1 {
  font-size: var(--wl-text-heading);
  margin: 0 0 1rem;
}

h2 {
  font-size: var(--wl-text-lede);
  margin: 0 0 0.5rem;
}

.lede {
  font-size: var(--wl-text-lede);
  color: var(--wl-text-muted);
}

.muted {
  color: var(--wl-text-muted);
}

.small {
  font-size: var(--wl-text-small);
  color: var(--wl-text-faint);
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--wl-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--wl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wl-text-muted);
}

/* --- Form ---------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--wl-stack);
  margin-top: 1.5rem;
}

.label {
  font-size: var(--wl-text-small);
  font-weight: 600;
}

.field {
  width: 100%;
  height: var(--wl-field-height);
  padding: 0 var(--wl-field-inset);
  border: 1px solid var(--wl-field-border);
  border-radius: var(--wl-radius-field);
  background: var(--wl-surface);
  color: var(--wl-text);
  font: inherit;
}

.field::placeholder {
  color: var(--wl-placeholder);
}

.field[readonly] {
  background: var(--wl-surface-sunk);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-small);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--wl-field-height);
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--wl-radius-field);
  background: var(--wl-action);
  box-shadow: var(--wl-shadow-action);
  color: var(--wl-action-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--wl-action-hover);
}

.error {
  margin: 0;
  color: var(--wl-error);
  font-weight: 600;
}

/* --- Position ------------------------------------------------------------------ */

.position {
  margin: 0;
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-position);
  line-height: 1;
  letter-spacing: var(--wl-tracking-display);
}

.tier {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: var(--wl-text-small);
  font-weight: 600;
  background: var(--wl-surface-sunk);
}

.tier--founding {
  background: var(--wl-founding-soft);
}

.tier--next {
  background: var(--wl-next-wave-soft);
}

.share {
  display: grid;
  gap: 0.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Landing --------------------------------------------------------------------
 * The "Haido Coming Soon" design. Below 1200px the chat moves under the form;
 * below 1000px everything stacks into one centred column. landing.js adds .is-live (animations on) and
 * .is-intro (the "How am i doing" opener); without it the page is complete and still.
 */

.landing {
  position: relative;
  overflow: hidden;
  text-align: left;
}

/* The warm glow behind everything, drifting slowly. It's as tall as the
   screen with the browser's bars hidden (lvh), so on phones it carries on
   behind the address bar instead of stopping short of it. */
.glow {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  --glow: var(--wl-glow-coral);
  background: radial-gradient(
    circle,
    var(--glow) 0%,
    color-mix(in srgb, var(--glow) 78%, transparent) 42%,
    color-mix(in srgb, var(--glow) 30%, transparent) 64%,
    transparent 80%
  );
}

.glow__orb--1 {
  top: -22%;
  left: 4%;
  width: 62%;
  height: 78%;
  animation: glow-1 34s ease-in-out infinite;
}

.glow__orb--2 {
  top: -18%;
  left: 26%;
  width: 44%;
  height: 56%;
  animation: glow-2 41s ease-in-out infinite;
}

.glow__orb--3 {
  top: 14%;
  right: 0;
  width: 74%;
  height: 96%;
  filter: blur(95px);
  --glow: var(--wl-glow-amber);
  animation: glow-3 29s ease-in-out infinite;
}

@keyframes glow-1 {
  0%, 100% { transform: translate(0, 0) scale(1.06); }
  33% { transform: translate(-5%, -4%) scale(1); }
  66% { transform: translate(3%, -6%) scale(1.1); }
}

@keyframes glow-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-6%, 2%) scale(1.1); }
  66% { transform: translate(5%, -3%) scale(1.04); }
}

@keyframes glow-3 {
  0%, 100% { transform: translate(0, 0) scale(1.02); }
  25% { transform: translate(4%, 3%) scale(1.1); }
  50% { transform: translate(-2%, 6%) scale(1.04); }
  75% { transform: translate(-5%, 2%) scale(1.12); }
}

/* The blob trail: blobs that wind round the page's content, drawn by
   trail.js between the glow and the content. It only exists with motion on. */
.trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.trail__blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(-200px, -200px, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.trail__halo {
  width: 160px;
  height: 160px;
  filter: none;
  background: radial-gradient(
    circle,
    var(--wl-blob-halo-core) 0%,
    var(--wl-blob-halo-mid) 30%,
    var(--wl-blob-halo-edge) 55%,
    transparent 72%
  );
}

.trail__blob--amber {
  background: radial-gradient(
    circle,
    var(--wl-blob-amber-core) 0%,
    var(--wl-blob-amber-mid) 44%,
    var(--wl-blob-amber-edge) 68%,
    transparent 86%
  );
}

.trail__blob--coral {
  background: radial-gradient(
    circle,
    var(--wl-blob-coral-core) 0%,
    var(--wl-blob-coral-mid) 44%,
    var(--wl-blob-coral-edge) 68%,
    transparent 86%
  );
}

.trail__blob--head {
  background: radial-gradient(
    circle,
    var(--wl-blob-head-core) 0%,
    var(--wl-blob-head-mid) 44%,
    var(--wl-blob-head-edge) 68%,
    transparent 86%
  );
}

/* --- Hero */

/* The hero is a little shorter than the screen, with the difference added
   on top, so the logo and form sit where they would in a full-screen hero but
   the next section starts 30% closer to the form. */
.hero {
  position: relative;
  z-index: 2;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(84px + 12vh) clamp(20px, 4vw, 48px) 48px;
  text-align: center;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 40px;
}

.hero__logo {
  margin: 0 auto 10px;
  font-family: var(--wl-font-display);
  font-weight: 400;
  font-size: var(--wl-text-hero);
  line-height: 1;
  letter-spacing: var(--wl-tracking-tight);
  color: var(--wl-text);
}

.hero__wordmark {
  display: inline-block;
  vertical-align: top;
  font-kerning: none;
}

.hero__lede {
  max-width: 46ch;
  margin: 0 auto 34px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-field);
  line-height: 1.55;
  color: var(--wl-text-soft);
  text-wrap: pretty;
}

/* --- Join form (hero and the last section) */

.join {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

/* Someone who came from a friend's link is told so, just above the form,
   lined up with the text in the email field (its border plus padding). */
.join__referred {
  margin: 0 0 14px;
  padding-left: calc(1.5px + 18px);
  font-size: var(--wl-text-field-lg);
  font-weight: 600;
  text-align: left;
  color: var(--wl-text);
}

.join__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.join__field {
  flex: 1 1 200px;
  min-width: 0;
  padding: 11px 18px;
  border: 1.5px solid var(--wl-glass-edge);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-glass-strong);
  box-shadow: var(--wl-glass-highlight);
  color: var(--wl-text);
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-field);
  font-weight: 500;
}

.join__field::placeholder {
  color: var(--wl-placeholder);
}

.join__field:focus-visible {
  outline: 2px solid var(--wl-focus);
  outline-offset: 2px;
}

.join__button {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 1px solid var(--wl-action-edge);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-action);
  box-shadow: var(--wl-shadow-action);
  color: var(--wl-action-text);
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-field);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease;
}

.join__button:hover {
  background: var(--wl-action-hover);
  transform: translateY(-1px) scale(1.04);
}

.join__button:active {
  transform: scale(0.96);
}

.join--large {
  max-width: 520px;
  margin: 0;
}

.join--large .join__field {
  padding: 14px 20px;
  font-size: var(--wl-text-field-lg);
}

.join--large .join__button {
  padding: 14px 24px;
  font-size: var(--wl-text-field-lg);
}

/* The headline over the last form, lined up with the text in its email field. */
.join__headline {
  max-width: 520px;
  margin: 0 0 28px;
  padding-left: calc(1.5px + 20px);
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-lead-in-title);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--wl-text);
  text-wrap: balance;
}

/* The terms: quiet body text under the form, lined up with the text in the
   email field like the referred line above it. */
.join__terms {
  margin: 12px 0 0;
  padding-left: calc(1.5px + 18px);
  font-size: var(--wl-text-label);
  line-height: 1.5;
  text-align: left;
  color: var(--wl-text-warm);
  text-wrap: pretty;
}

.join__terms a {
  color: inherit;
  text-underline-offset: 2px;
}

.join__terms a:hover {
  color: var(--wl-text);
}

.notice {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
}

.notice__bubble {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: 16px 16px 16px 5px;
  background: var(--wl-glass-strong);
  box-shadow: var(--wl-shadow-glass);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  line-height: 1.4;
  color: var(--wl-accent);
  text-align: left;
}

/* --- Chat: three short conversations, cycled by landing.js */

/* On wide screens the chat sits beside the logo, switching sides with each
   conversation. Between 1000px and 1200px it narrows to keep clear of the
   form, so its longest replies never reach the button. */
.chat {
  position: absolute;
  top: 20%;
  right: 5%;
  z-index: 1;
  width: clamp(200px, (100vw - 460px) / 2 - 5vw - 24px, 270px);
  pointer-events: none;
}

.chat--left {
  right: auto;
  left: 5%;
}

.convo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.convo + .convo,
.bubble--typing {
  display: none;
}

.bubble {
  align-self: flex-start;
  max-width: 250px;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--wl-glass-edge-soft);
  border-radius: var(--wl-radius-bubble) var(--wl-radius-bubble) var(--wl-radius-bubble) 6px;
  background: var(--wl-glass-faint);
  box-shadow: var(--wl-shadow-glass);
  color: var(--wl-text-chat);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-bubble);
  line-height: 1.45;
  text-align: left;
  transform-origin: 0% 100%;
}

.bubble--user {
  align-self: flex-end;
  max-width: 210px;
  border-radius: var(--wl-radius-bubble) var(--wl-radius-bubble) 6px var(--wl-radius-bubble);
  background: var(--wl-glass-soft);
  transform-origin: 100% 100%;
}

.bubble__tag {
  display: block;
  margin-bottom: 4px;
  font-size: var(--wl-text-tag);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wl-chat-tag);
}

.typing {
  display: inline-flex;
  gap: 4px;
  padding: 3px 2px;
}

.typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wl-text-chat);
  animation: typing 1s ease-in-out infinite;
}

.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* --- Sections */

/* The side gutters are variables so the investors row can reach past them
   to the page's edges. */
.band {
  --gutter-l: clamp(20px, calc(20vw - 40px), 190px);
  --gutter-r: clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
}

.band__inner {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 20px;
  max-width: var(--wl-content-width);
  margin: 0 auto;
  padding: clamp(72px, 11vh, 128px) 0;
}

/* A rule between sections. The first has none: the hero runs straight into
   it. */
.band + .band .band__inner {
  border-top: 1px solid var(--wl-border);
}

.band--last .band__inner {
  padding-bottom: clamp(120px, 18vh, 200px);
}

.band__label {
  flex: 1 1 100%;
  margin: 0;
  padding-top: 12px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  font-weight: 400;
  letter-spacing: var(--wl-tracking-eyebrow);
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--wl-text);
}

.band__body {
  flex: 1 1 100%;
  min-width: 0;
}

.personas {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.persona {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 24px);
  padding: 24px 24px 26px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: var(--wl-radius-glass) var(--wl-radius-glass) var(--wl-radius-glass) 6px;
  background: var(--wl-glass);
  box-shadow: var(--wl-glass-highlight);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* A round portrait, toned warm: the photo goes grey, lightens over the
   shadow colour, then takes the tint, so all four match whatever the source. */
.persona__photo {
  position: relative;
  flex: none;
  width: clamp(56px, 7vw, 72px);
  height: clamp(56px, 7vw, 72px);
  overflow: hidden;
  border: 1px solid var(--wl-glass-edge);
  border-radius: 50%;
  background: var(--wl-photo-shadow);
  box-shadow: var(--wl-shadow-photo);
  isolation: isolate;
}

.persona__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: screen;
}

.persona__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wl-photo-tint);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.persona__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.persona__title {
  margin: 0;
  font-family: var(--wl-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--wl-tracking-display);
}

.persona__text {
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-chip);
  line-height: 1.6;
  color: var(--wl-text-soft);
  text-wrap: pretty;
}

/* The founder's letter: the same reading type as the waitlist's lead-in,
   signed off with a handwritten-style name. */
.letter {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
  font-size: var(--wl-text-lead-in);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--wl-text-warm);
}

.letter p {
  margin: 0;
  text-wrap: pretty;
}

/* The two founders sign side by side, wrapping under each other if there's
   no room. */
.letter__signs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
  margin-top: -4px;
}

.letter .letter__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.letter__name {
  font-family: var(--wl-font-signature);
  font-size: var(--wl-text-signature);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--wl-text);
  transform: rotate(-2deg);
  transform-origin: 0 100%;
}

.letter__role {
  font-size: var(--wl-text-eyebrow);
  letter-spacing: 0.18em;
  color: var(--wl-text-faint-warm);
}

/* The angel investors: a row of cards that scrolls sideways. Without
   landing.js it's a plain swipeable row; with it, it also glides and loops on
   its own. */
.angels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin-top: 58px;
  text-align: left;
}


.angels__title {
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  font-weight: 400;
  letter-spacing: var(--wl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wl-text);
}

.angels__track:focus-visible {
  outline: 2px solid var(--wl-text);
  outline-offset: 4px;
  border-radius: var(--wl-radius-glass);
}

/* The row runs off both edges of the page: it reaches out past the gutters
   (and, on wide screens, the space either side of the content), and pads back
   in by the same amount so the first card lines up with the text. Cards snap
   only when a swipe ends near one, so a short row can still reach its end. */
.angels__track {
  --reach-l: calc(var(--gutter-l) + var(--centring));
  --reach-r: calc(var(--gutter-r) + var(--centring));
  --centring: max(0px, (100vw - var(--gutter-l) - var(--gutter-r) - var(--wl-content-width)) / 2);
  display: flex;
  gap: 14px;
  margin: 0 calc(-1 * var(--reach-r)) 0 calc(-1 * var(--reach-l));
  padding: 2px var(--reach-r) 8px var(--reach-l);
  scroll-padding-left: var(--reach-l);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

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

.angel {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  width: 250px;
  padding: 20px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: var(--wl-radius-glass) var(--wl-radius-glass) var(--wl-radius-glass) 6px;
  background: var(--wl-glass-faint);
  box-shadow: var(--wl-glass-highlight);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  scroll-snap-align: start;
}

/* The same warm portrait as the personas. */
.angel__photo {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--wl-glass-edge);
  border-radius: 50%;
  background: var(--wl-photo-shadow);
  box-shadow: var(--wl-shadow-photo);
  isolation: isolate;
}

.angel__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: screen;
}

/* No photo yet: an empty glass circle with a growth line holds the place. */
.angel__photo--placeholder {
  display: grid;
  place-items: center;
  background: var(--wl-glass-strong);
  box-shadow: var(--wl-glass-highlight);
}

.angel__photo.angel__photo--placeholder::after {
  display: none;
}

.angel__photo--placeholder svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--wl-text-warm);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.angel__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wl-photo-tint);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.angel__name {
  margin: 0;
  font-family: var(--wl-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--wl-tracking-display);
}

.angel__bio {
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-chip);
  line-height: 1.6;
  color: var(--wl-text-soft);
  text-wrap: pretty;
}

.pitch {
  margin: 0 0 32px;
  font-size: var(--wl-text-pitch);
  line-height: max(1.75em, 40px);
  letter-spacing: var(--wl-tracking-tight);
  text-wrap: pretty;
}

/* The few lines above the timeline: a heading, then the prize draw and its
   small print, which differs only in being italic. */
.lead-in {
  display: flow-root;
  max-width: 760px;
  margin: 0;
  font-size: var(--wl-text-lead-in);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--wl-text-warm);
  text-wrap: pretty;
}

.lead-in__title,
.lead-in p {
  margin: 18px 0;
}

.lead-in a {
  color: inherit;
  text-underline-offset: 2px;
}

/* The section's own padding already sets it off from the divider above. */
.lead-in__title {
  margin-top: 0;
}

.lead-in__title {
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-lead-in-title);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--wl-text);
}

.lead-in__small {
  font-size: max(12px, 0.75em);
  font-style: italic;
}

/* How the waitlist works: the whole queue as one bar. The first 1,000 places
   (--split of the width) are the Founding 1,000, filled in coral multiplied into the glow; the
   rest of the waitlist runs on in glass. Each part's perks sit under it, and
   on the position page a moss blob shows where they are. */
.queue {
  --split: 64%;
  margin: 8px 0 0;
}

/* After signup the section holding the bar doesn't start its own layer, so
   its multiplied coral blends with the glow behind the page; it still sits
   above the glow, which comes first. The landing page keeps its layer, above
   the blob trail, so there the coral shows as it is. */
.joined__section:has(.queue) {
  z-index: auto;
}

.joined__intro + .queue {
  margin-top: 36px;
}

.queue__track {
  position: relative;
  padding-top: 30px;
}

.queue__bar {
  position: relative;
  display: flex;
  height: 14px;
}

.queue__founding,
.queue__rest {
  border-radius: var(--wl-radius-pill);
}

.queue__founding {
  flex: none;
  width: var(--split);
  background: var(--wl-queue-founding);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--wl-queue-founding) 80%, transparent);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* The landing page keeps its sections in their own layer (above the blob
   trail), so the multiply has nothing to blend with there; a deeper coral
   stands in for the blended one. */
.band .queue__founding {
  background: var(--wl-queue-founding-deep);
  opacity: 0.9;
}

.queue__rest {
  flex: 1;
  margin-left: 4px;
  border: 1px solid var(--wl-glass-edge);
  background: var(--wl-glass);
}

/* "You": a moss blob on the bar, drifting like the referral blobs, with
   their place above it. */
.queue__you {
  --at: 0.5;
  position: absolute;
  top: 50%;
  left: calc(7px + var(--at) * (var(--split) - 14px));
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}

.queue__you::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(1.5px) drop-shadow(0 4px 10px color-mix(in srgb, var(--wl-blob-shadow) 28%, transparent));
  background: radial-gradient(
    circle,
    var(--wl-blob-head-core) 0%,
    var(--wl-blob-head-mid) 44%,
    var(--wl-blob-head-edge) 68%,
    transparent 86%
  );
  animation: refer-blob-a 6s ease-in-out infinite;
}

.queue__you--rest {
  left: calc(var(--split) + 40px);
}

.queue__you-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  padding: 3px 10px;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-queue-label);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--wl-blob-shadow) 18%, transparent);
  color: var(--wl-text);
  font-size: var(--wl-text-chip);
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(calc(var(--at) * -100%));
}

/* The label leans right near the start of the bar and left near its end, so
   it never runs off the edge. */
.queue__you-label {
  margin-left: calc(-10px + var(--at) * 20px);
}

.queue__scale {
  position: relative;
  height: 1.4em;
  margin: 8px 0 0;
  font-size: var(--wl-text-chip);
  color: var(--wl-text-soft);
}

.queue__scale span {
  position: absolute;
  left: 0;
}

.queue__scale span + span {
  left: var(--split);
  transform: translateX(-100%);
}

.queue__groups {
  display: grid;
  grid-template-columns: var(--split) minmax(0, 1fr);
  margin-top: 20px;
}

.queue__group {
  padding: 0 24px 0 0;
}

.queue__group + .queue__group {
  padding: 0 0 0 20px;
  border-left: 1px dashed color-mix(in srgb, var(--wl-text) 50%, transparent);
}

.queue__title {
  margin: 0;
  font-size: var(--wl-text-queue-title);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wl-text);
}

/* Each title is two lines: the group, then its places in the body style. */
.queue__title span {
  display: block;
  margin-top: 2px;
  font-size: var(--wl-text-lead-in);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wl-text-warm);
}

.queue__perks {
  display: grid;
  gap: 6px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.queue__perk {
  font-size: var(--wl-text-lead-in);
  line-height: 1.5;
  color: var(--wl-text-warm);
}

.queue__perk strong {
  font-weight: 700;
}

/* --- Footer */

.foot {
  position: relative;
  z-index: 2;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* The wordmark and a Company column side by side, the legal line under both. */
.foot__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  max-width: var(--wl-content-width);
  margin: 0 auto;
  padding: 56px 0 28px;
  border-top: 1px solid var(--wl-border);
  font-size: var(--wl-text-label);
  text-align: left;
}

.foot__logo {
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-logo-small);
  line-height: 1;
}

/* The wordmark with the support address under it. */
.foot__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.foot__contact {
  color: var(--wl-text);
  text-decoration: none;
}

.foot__legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 40px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--wl-text-muted);
  text-wrap: balance;
}

/* --- After joining (check-email): the glass circle holding their place, what
   happens now (the landing page's timeline), the Founding 100 and referral
   sections, and the footer. */

.joined {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.joined__head {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 28px clamp(20px, 6vw, 48px);
}

.joined__brand {
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-logo-small);
  line-height: 1;
  letter-spacing: var(--wl-tracking-tight);
  color: var(--wl-text);
  text-decoration: none;
}

.joined__main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 6vh, 64px) clamp(20px, 6vw, 48px) 0;
  text-align: center;
}

/* The circle drifts in a slow loop and breathes, so the page feels alive. */
.place {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: place-drift 18s linear infinite;
}

.place__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(390px, 82vw);
  aspect-ratio: 1;
  padding: 24px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: 50%;
  background: var(--wl-glass);
  box-shadow: var(--wl-shadow-place);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  animation: place-breathe 6.5s ease-in-out infinite;
}

/* The circle's type is the design's: one word in the display face where the
   position number sits, and a short line in Plex Mono under it. */
.place__word {
  margin: 0;
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-place);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wl-text);
}

.place__lead {
  max-width: 26ch;
  margin: 18px 0 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-place-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Once verified (the position page): a line over the number in the display
   face, and a pill naming their group. */
.place__intro {
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-place-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* A small tick before "Your email is now verified", in the line's own ink. */
.place__check {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.place__number {
  margin: 12px 0 0;
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-place);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wl-text);
}

.place__status {
  display: inline-flex;
  margin: 26px 0 0;
  padding: 8px 16px;
  border: 1px solid var(--wl-glass-edge-soft);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-status);
  box-shadow: var(--wl-glass-highlight);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-chip);
  color: var(--wl-status-text);
}

/* The position and check-email pages: the circle holds a line ("You're in
   position", "You're in the queue"), the number and a pill (their group, or
   the dark one asking them to verify). On the position page the verified
   line sits underneath. The
   number alone is in the flow, 10px above the centre; the line above it and
   the pill below hang out of the flow, so neither pushes the number. */
.place--numbered .place__circle {
  position: relative;
}

.place__above {
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-place-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.place--numbered .place__above {
  position: absolute;
  bottom: calc(50% + var(--wl-text-place) * 0.36 + 39px);
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}

.place--numbered .place__number {
  position: relative;
  top: -10px;
  margin-top: 0;
  /* The display face keeps room under the line for descenders, which digits
     never use, so the figures sit high. This drops them to the centre. */
  padding-top: 0.18em;
}

/* Placed from the circle's centre, so it stays put when the number moves. */
.place--numbered .place__status {
  position: absolute;
  top: calc(50% + var(--wl-text-place) * 0.36 + 26px);
  left: 50%;
  margin: 0;
  white-space: nowrap;
  transform: translateX(-50%);
}

.place--numbered .place__intro {
  margin-top: 28px;
}

/* Before verifying (check-email): the provisional number in a fainter ink,
   since it isn't theirs until they verify (a dash until the page receives
   one). The pill asking them to verify looks like the group pill, not a
   button; on phones it opens the mail app. */
.place__number--pending {
  color: var(--wl-text-faint-warm);
}

.place__status--verify {
  margin-top: 22px;
}

.place__status--verify[href] {
  text-decoration: none;
}

.place__status--verify[href]:focus-visible {
  outline: 2px solid var(--wl-focus);
  outline-offset: 3px;
}

.joined__confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 440px;
  padding: clamp(32px, 6vh, 56px) 0 0;
}

.joined__confirm p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--wl-text-warm);
  text-wrap: pretty;
}

.joined__confirm strong {
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Signed up from a friend's link: thanked first, with the thanks in bold. */
.joined__confirm .joined__referred strong {
  display: block;
  font-weight: 600;
}

/* Didn't get the email: a quiet line offering to send it again. Resending
   reloads this page at #resent (an anchor at the top of the page, so it
   doesn't scroll), which shows the "Sent again" line. */
.joined__confirm .joined__resend p {
  font-size: var(--wl-text-small);
}

.joined__resend-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--wl-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.joined__resend-button:focus-visible {
  outline: 2px solid var(--wl-focus);
  outline-offset: 2px;
}

/* "Sent again" with a tick on a faint wash of the "Didn't get it?" line's
   ink: a change of state, but quieter than the verify pill above. */
.joined__confirm .joined__resent {
  display: none;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--wl-radius-pill);
  background: color-mix(in srgb, var(--wl-text-muted) 10%, transparent);
  font-size: var(--wl-text-small);
  color: var(--wl-text-muted);
}

.joined:has(#resent:target) .joined__resent,
.joined__confirm .joined__resent.is-sending {
  display: inline-flex;
}

/* While it sends, the same line says "Sending…", without the tick. */
.joined__resent.is-sending .place__check {
  display: none;
}

@keyframes place-drift {
  0%,
  100% {
    transform: translate(0, -4px);
  }
  25% {
    transform: translate(4px, 0);
  }
  50% {
    transform: translate(0, 4px);
  }
  75% {
    transform: translate(-4px, 0);
  }
}

@keyframes place-breathe {
  50% {
    transform: scale(1.018);
  }
}

.joined__check {
  max-width: 36ch;
  margin: 32px 0 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-mono);
  line-height: 1.6;
  color: var(--wl-text-soft);
  text-wrap: pretty;
}

.joined__check strong {
  font-weight: 500;
  color: var(--wl-text);
  overflow-wrap: anywhere;
}

.joined__section {
  --gutter: clamp(20px, 6vw, 48px);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(720px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(56px, 9vh, 96px) var(--gutter) 0;
  text-align: left;
}

.joined__section--ruled::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(56px, 8vh, 96px);
  background: var(--wl-border);
}

/* The headline and copy share the landing page's lead-in type; the small
   uppercase labels introduce each part. */
.joined__headline {
  margin: 0 0 32px;
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-lead-in-title);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--wl-text);
  text-wrap: balance;
}

.joined__intro {
  margin: 0;
  font-size: var(--wl-text-lead-in);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--wl-text-warm);
  text-wrap: pretty;
}

.joined__label {
  margin: 0 0 28px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  font-weight: 400;
  letter-spacing: var(--wl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wl-text-warm);
}

.joined__intro + .joined__label {
  margin-top: 32px;
  margin-bottom: 12px;
}

.joined__subtitle {
  margin: 0 0 20px;
  font-size: var(--wl-text-subtitle);
  font-weight: 600;
}

/* Referring: copying and sharing the link are the main actions, so they're
   large buttons, with the link itself shown under them to read, not edit.
   The heading and copy match the section below. */
.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.share-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-glass);
  color: var(--wl-text);
  font-family: var(--wl-font-body);
  font-size: var(--wl-text-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.share-action[hidden] {
  display: none;
}

.share-action:hover:not(:disabled) {
  background: var(--wl-glass-strong);
}

.share-action--main {
  padding: 14px 24px;
  border-color: var(--wl-action-edge);
  background: var(--wl-action);
  color: var(--wl-action-text);
  font-weight: 700;
}

.share-action--main:hover:not(:disabled) {
  background: var(--wl-action-hover);
}

.share-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.share-action:focus-visible {
  outline: 2px solid var(--wl-text);
  outline-offset: 2px;
}

.share-action svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-link {
  margin: 14px 0 0;
  padding-left: 10px;
  overflow-wrap: anywhere;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-chip);
  color: var(--wl-text-soft);
}

/* "More ways to share": on phones the device's own share sheet; elsewhere a
   small glass panel under the button, with one row per app. */
.share-more {
  position: relative;
}

.share-sheet {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: 18px;
  background: color-mix(in srgb, var(--wl-surface) 92%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--wl-text) 14%, transparent);
  backdrop-filter: blur(12px);
}

.share-sheet[hidden] {
  display: none;
}

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

.share-sheet__item {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: none;
  font-family: var(--wl-font-body);
  cursor: pointer;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--wl-text);
  font-size: var(--wl-text-small);
  font-weight: 600;
  text-decoration: none;
}

.share-sheet__item:hover,
.share-sheet__item:focus-visible {
  background: var(--wl-glass-strong);
  outline: none;
}

.share-sheet__item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-sheet__note {
  max-width: 220px;
  margin: 4px 12px 6px;
  font-size: var(--wl-text-chip);
  color: var(--wl-text-soft);
}

/* On wider screens the invite button and its panel match the size of the
   large "Join waitlist" button. */
@media (min-width: 760px) {
  .share-action--main,
  .share-sheet__item {
    font-size: var(--wl-text-field-lg);
  }
}

/* How many friends have joined: two blobs, moss and coral, gently drifting
   and changing shape, then the number large, in the body face so it lines up
   with its label. */
.refer__count {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  font-size: var(--wl-text-small);
  color: var(--wl-text-warm);
}

.refer__blobs {
  display: flex;
  flex: none;
  align-items: center;
  height: 48px;
}

.refer__blobs span {
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  filter: blur(2px) drop-shadow(0 4px 10px color-mix(in srgb, var(--wl-blob-shadow) 28%, transparent));
  background: radial-gradient(
    circle,
    var(--wl-blob-head-core) 0%,
    var(--wl-blob-head-mid) 44%,
    var(--wl-blob-head-edge) 68%,
    transparent 86%
  );
  animation: refer-blob-a 6s ease-in-out infinite;
}

.refer__blobs span + span {
  margin-left: -15px;
  background: radial-gradient(
    circle,
    var(--wl-blob-coral-core) 0%,
    var(--wl-blob-coral-mid) 44%,
    var(--wl-blob-coral-edge) 68%,
    transparent 86%
  );
  animation: refer-blob-b 7.5s ease-in-out -1.4s infinite;
}

@keyframes refer-blob-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 50%; }
  25% { transform: translate3d(4px, -3px, 0) scale(1.14); border-radius: 58% 42% 46% 54%; }
  50% { transform: translate3d(-3px, 4px, 0) scale(1.04); border-radius: 44% 56% 60% 40%; }
  75% { transform: translate3d(3px, 3px, 0) scale(1.16); border-radius: 54% 46% 40% 60%; }
}

@keyframes refer-blob-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); border-radius: 50%; }
  30% { transform: translate3d(-4px, 3px, 0) scale(1); border-radius: 42% 58% 55% 45%; }
  60% { transform: translate3d(3px, -4px, 0) scale(1.17); border-radius: 60% 40% 44% 56%; }
}

.refer__count strong {
  font-weight: 700;
  color: var(--wl-text);
}

/* The footer here is narrower, with a Company column beside the wordmark. */
.foot--joined {
  margin-top: auto;
  padding-top: clamp(72px, 11vh, 120px);
}

.foot--joined .foot__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px;
  max-width: 720px;
  font-size: var(--wl-text-field);
  text-align: left;
}

.foot--joined .foot__logo {
  font-size: 1.5rem;
  color: var(--wl-text);
  text-decoration: none;
}

.foot--joined .foot__legal {
  max-width: 88ch;
  padding-top: 8px;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}

.foot__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot__heading {
  padding-bottom: 4px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  letter-spacing: var(--wl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wl-text-muted);
}

.foot__links a {
  color: var(--wl-text);
  text-decoration: none;
}

.foot__links a:hover,
.foot__contact:hover {
  color: var(--wl-accent);
}

/* --- Narrow: one centred column, chat under the form. */

@media (max-width: 999px) {
  /* Here the chat fills the hero, so it's the bottom padding that shrinks,
     bringing the next section 30% closer. */
  .hero {
    padding-top: 84px;
    padding-bottom: 20px;
  }

  .chat {
    position: static;
    width: 100%;
    max-width: 300px;
    margin: 28px auto 0;
  }
}

/* --- Phones: the hero fills the screen. The logo settles small at the top
   centre with the tagline under it, the chat plays in the middle and the form
   sits at the bottom. The hero's wrapper is dissolved so the logo, tagline,
   chat and form can be ordered freely. */

@media (max-width: 759px) {
  /* On phones every page sits 10px further in from the left and 5px from
     the right. The angels' row still reaches both edges of the screen. */
  body {
    padding-right: 5px;
    padding-left: 10px;
  }

  .angels__track {
    --reach-l: calc(var(--gutter-l) + var(--centring) + 10px);
    --reach-r: calc(var(--gutter-r) + var(--centring) + 5px);
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 36px;
  }

  .hero__inner {
    display: contents;
  }

  /* The top (logo and tagline) and the bottom (form) take equal shares of the
     height around the chat, so the chat sits in the middle of the screen. The
     form's top margin matches the logo's height and the tagline's gap, which
     keeps the two shares roughly equal. The logo sits 35px down its share
     with a real margin, not a nudge, so on a short screen with no spare
     height the chat starts below the tagline rather than over it. */
  .hero__logo {
    flex: none;
    margin: 35px 0 0;
    font-size: var(--wl-text-logo-mobile);
  }

  /* Two sizes down from desktop, so the lines are shorter but the tagline
     still fits on two lines, split evenly, on phones down to 320px. */
  .hero__lede {
    flex: 1 1 0;
    max-width: 40ch;
    margin: 12px auto 0;
    font-size: min(var(--wl-text-label), 3.6vw);
    text-wrap: balance;
  }

  .hero .chat {
    order: 1;
    margin-block: 24px;
  }

  .hero .join {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    order: 2;
    margin-top: calc(var(--wl-text-logo-mobile) + 12px);
  }

  /* The sections keep the hero's and footer's 20px gutter on the right and
     set their text 15px further in on the left. */
  .band {
    --gutter-l: 35px;
    --gutter-r: 20px;
  }

  /* The email field gives up width so the button fits beside it. */
  .join__row {
    flex-wrap: nowrap;
  }

  .join__field,
  .join--large .join__field {
    flex-basis: 0;
    padding: 11px 14px;
    font-size: var(--wl-text-field);
  }

  .join__referred,
  .join__headline,
  .join__terms {
    padding-left: calc(1.5px + 14px);
  }

  .join__button,
  .join--large .join__button {
    padding: 11px 16px;
    font-size: var(--wl-text-field);
  }

  /* The place circle sits smaller so the page below it shows. 272px still
     keeps the group pill, on one line, inside its curve on a 320px phone. */
  .place__circle {
    width: max(272px, 70vw);
    padding: 16px;
  }

  .place__status {
    margin-top: 18px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  /* On phones the circle holds only the number: the circle's
     box dissolves, the number takes its glass, "You're in position" sits
     above it, and the pill and the verified line follow underneath. */
  .place--numbered .place__circle:has(.place__number) {
    display: contents;
  }

  .place--numbered .place__number {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Sized to the number, so it keeps the same margin around it. */
    width: calc(var(--wl-text-place) * 3.85);
    aspect-ratio: 1;
    border: 1px solid var(--wl-glass-edge);
    border-radius: 50%;
    background: var(--wl-glass);
    box-shadow: var(--wl-shadow-place);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    animation: place-breathe 6.5s ease-in-out infinite;
  }

  .place--numbered .place__above {
    position: static;
    margin-bottom: 16px;
    transform: none;
  }

  .place--numbered .place__status {
    position: static;
    margin-top: 28px;
    transform: none;
  }

  .place--numbered .place__intro {
    margin-top: 16px;
  }

  .joined__confirm p {
    font-size: var(--wl-text-small);
  }

  /* The share buttons stack, centred and the same width, and the friends
     count sits centred under them. */
  .share-actions {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .share-action {
    justify-content: center;
    width: min(100%, 250px);
    box-sizing: border-box;
  }

  .refer__count {
    justify-content: center;
  }

  .share-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 250px);
  }

  .share-sheet {
    left: 50%;
    transform: translateX(-50%);
  }

  .share-link--locked {
    padding-left: 0;
    text-align: center;
  }
}



@media (min-width: 760px) and (max-width: 999px) {
  .band {
    --gutter-r: clamp(20px, calc(20vw - 40px), 190px);
  }
}

/* --- Motion (only once landing.js has marked the page live) */

.is-live .bubble {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-live .bubble.is-on {
  opacity: 1;
  transform: none;
}

.is-live .bubble--typing.is-on {
  display: block;
}

.is-live [data-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-live [data-reveal].is-shown > * {
  opacity: 1;
  transform: none;
}

/* The opener: "How am i doing" folds into "Haido", then flies into the logo.
   This is only the starting state; landing.js plays every step. The real logo
   never moves: it stays in place, hidden, and fades in as the copy lands on it.
   The word and the logo share font, tracking, kerning and line height, so the
   copy lands exactly on the logo. */

.intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.is-intro .intro {
  display: flex;
}

.intro__word {
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-intro);
  line-height: 1;
  letter-spacing: var(--wl-tracking-tight);
  font-kerning: none;
  white-space: nowrap;
  color: var(--wl-text);
}

.intro__flyer {
  display: inline-block;
  transform-origin: 0 0;
}

/* The padding, taken back by the margins, keeps the tall d and the
   descenders from being clipped as the letters fold. */
.intro__letter {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  white-space: pre;
  padding: 0.1em 0 0.25em;
  margin: -0.1em 0 -0.25em;
  position: relative;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(22px);
}

.is-intro .hero__wordmark,
.is-intro .hero__inner > :not(.hero__logo),
.is-intro .chat {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .glow__orb,
  .typing span,
  .place,
  .place__circle,
  .place--numbered .place__number,
  .refer__blobs span,
  .queue__you::before {
    animation: none;
  }

  .is-live .bubble,
  .is-live [data-reveal] > *,
  .join__button {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* All four conversations share one grid cell, so the chat is always as tall as
   the longest and never shifts the page; only the current one is visible. The
   typing dots sit in the reply's slot for the same reason. */
.is-live .chat {
  display: grid;
}

.is-live .convo {
  display: flex;
  grid-area: 1 / 1;
  visibility: hidden;
}

.is-live .convo.is-current {
  visibility: visible;
}

.bubble-slot {
  display: grid;
  justify-items: start;
}

.bubble-slot > * {
  grid-area: 1 / 1;
}

/* Haido thinking out loud: lines appear in turn under the question, each
   ticked off before the reply takes their place. No bubble, so it reads as
   work in progress rather than something Haido said. */
.processing {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
}

.is-live .processing.is-on {
  display: flex;
}

.processing__line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-bubble);
  line-height: 1.4;
  color: var(--wl-text-chat);
  text-align: left;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s ease;
}

.processing__line.is-on {
  opacity: 1;
  transform: none;
}

.processing__mark {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: 22px;
}

.processing__line.is-done .typing {
  display: none;
}

.processing__line.is-done .processing__mark::after {
  content: "\2713";
  color: var(--wl-chat-tag);
}

/* A reaction pinned to a bubble's corner, popping in just after the message. */
.bubble--reacted {
  position: relative;
  margin-bottom: 8px;
}

.bubble__reaction {
  position: absolute;
  right: -8px;
  bottom: -12px;
  padding: 2px 6px;
  border: 1px solid var(--wl-glass-edge);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-glass-strong);
  box-shadow: var(--wl-shadow-glass);
  font-size: var(--wl-text-field);
  line-height: 1.3;
}

.is-live .bubble__reaction {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.25s ease,
    transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1);
}

.is-live .bubble__reaction.is-on {
  opacity: 1;
  transform: none;
}

/* On small phones the portrait sits above the copy, so the text keeps a
   readable width. */
@media (max-width: 599px) {
  .persona {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 16px;
  }

  /* The title sits beside the portrait, centred on it; the copy runs full
     width underneath. */
  .persona__body {
    display: contents;
  }

  /* The copy is inset past the portrait column: 14px + 20px + 16px of
     inset, less these cards' own 24px padding. */
  .persona__text {
    grid-column: 1 / -1;
    padding-left: calc(14px + 20px + 16px - 24px);
  }
}

/* On phones the bar runs down the left instead, each part as tall as its
   text beside it. The track, bar, groups and marker step aside (display:
   contents) so their pieces sit straight on the queue's grid: column 1 is the
   bar, column 2 the text; row 1 the Founding 1,000, row 2 the rest. The blob
   is placed within its part's row, and its "You" label leads that part's
   text. */
@media (max-width: 759px) {
  .queue {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: 20px;
  }

  .queue__track,
  .queue__bar,
  .queue__groups,
  .queue__you {
    display: contents;
  }

  .queue__scale {
    display: none;
  }

  .queue__founding,
  .queue__rest {
    grid-column: 1;
    width: auto;
    margin: 0;
  }

  .queue__founding {
    grid-row: 1;
  }

  .queue__rest {
    grid-row: 2;
    margin-top: 18px;
  }

  .queue__group {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 28px;
  }

  .queue__group + .queue__group {
    grid-row: 2;
    padding: 18px 0 4px;
    border-top: 1px dashed color-mix(in srgb, var(--wl-text) 50%, transparent);
    border-left: 0;
  }

  /* The blob fills its part's row as a 32px painted circle, placed --at of
     the way down it, so it follows the row's height. It holds still here. */
  .queue__you::before {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    width: 32px;
    height: auto;
    margin-left: -9px;
    border-radius: 0;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: 50% calc(var(--at) * 100%);
    animation: none;
  }

  .queue__you--rest::before {
    grid-row: 2;
    background-position: 50% 18px;
  }

  .queue__you-label {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin: 0;
    transform: none;
  }

  .queue__you--rest .queue__you-label {
    grid-row: 2;
    margin-top: 18px;
  }

  .queue:has(.queue__you:not(.queue__you--rest)) .queue__group:first-child {
    padding-top: 38px;
  }

  .queue:has(.queue__you--rest) .queue__group + .queue__group {
    padding-top: 50px;
  }
}

/* --- Terms and privacy: long legal text on the plain page colour, one
   readable column under the post-signup header, the post-signup footer below. */

.legal {
  --gutter: clamp(20px, 6vw, 48px);
  box-sizing: border-box;
  width: 100%;
  max-width: calc(720px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(24px, 6vh, 64px) var(--gutter) 0;
  font-size: var(--wl-text-field-lg);
  line-height: 1.7;
  color: var(--wl-text-warm);
  overflow-wrap: break-word;
}

.legal__title {
  margin: 0 0 12px;
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--wl-tracking-tight);
  color: var(--wl-text);
  text-wrap: balance;
}

.legal__updated {
  margin: 0 0 40px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  letter-spacing: var(--wl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wl-text-muted);
}

.legal h2 {
  margin: 48px 0 16px;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  font-weight: 400;
  letter-spacing: var(--wl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wl-text);
}

.legal p {
  margin: 0 0 16px;
  text-wrap: pretty;
}

.legal strong {
  font-weight: 600;
  color: var(--wl-text);
}

.legal a {
  color: var(--wl-text);
}

.legal a:hover {
  color: var(--wl-accent);
}

.legal__clauses {
  margin: 0;
  padding-left: 1.75em;
}

.legal__clauses > li {
  margin-bottom: 20px;
  padding-left: 0.25em;
  text-wrap: pretty;
}

.legal__clauses > li::marker {
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-label);
  color: var(--wl-text-muted);
}

.legal__clauses p {
  margin: 12px 0 0;
}