/* Open 2 Agents · nav + hero (agent A)
   Desktop (>= 1024px): the hero is a 1440x920 design "stage" scaled by --u (one design px in CSS px).
   The WebGL shader hard-codes the text boxes it keeps the bots away from, so the copy is placed in
   design units on the same stage and always lines up with them. Below 1440 the scale stops at 0.875
   and the stage is cropped on the right (the crowd), never squeezed under the copy.
   Mobile (< 1024px): nav, copy in normal flow, then a crop of the crowd (design x 560-1440, y 240-920). */

/* ---------- nav ---------- */
.nav {
  --u: 1px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 72px; padding-inline: var(--margin);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--bg);
}
.nav a { text-decoration: none; }
.nav__logo {
  display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(21 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: -0.02em;
}
.nav__menu { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.nav__links { display: none; list-style: none; margin: 0; padding: 0; gap: calc(24 * var(--u)); }
.nav__links a {
  font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--bg);
  padding-block: calc(4 * var(--u));
}
.nav__links a:hover { color: var(--tone-3); }
.nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(48 * var(--u)); padding-inline: calc(24 * var(--u));
  background: var(--bg); color: var(--ink);
  font-size: calc(16 * var(--u)); line-height: 1; white-space: nowrap;
}
.nav__cta:hover { background: var(--tone-2); }
@media (max-width: 719px) {
  .nav__cta { height: 40px; padding-inline: 16px; font-size: 15px; }
}
@media (min-width: 720px) {
  .nav__links { display: flex; }
}
@media (min-width: 1024px) {
  .nav {
    --u: max(0.875px, calc(100vw / 1440));
    height: calc(96 * var(--u)); padding-inline: calc(48 * var(--u));
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--tone-9); color: var(--bg);
  padding-top: 72px;
}
.hero__stage { display: flex; flex-direction: column; }
.hero__copy { padding: 32px var(--margin) 0; }
.hero__art { order: 2; }
.hero__title {
  font-size: clamp(34px, calc((100vw - 2 * var(--margin)) / 13), 56px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500;
}
.hero__title span { display: block; }
.hero__sub {
  margin-top: 20px; max-width: 532px;
  font-size: 17px; line-height: 1.6; color: var(--tone-2);
}

/* waitlist form (replaces the install block) */
.hero .waitlist { margin-top: 24px; max-width: 520px; }

/* art (mobile crop: design x 560-1440, y 240-920) */
.hero__art {
  position: relative; overflow: hidden; margin-top: 8px;
  aspect-ratio: 880 / 680;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
          mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.hero__canvas {
  width: calc(1440 / 880 * 100%); max-width: none; height: auto; aspect-ratio: 1440 / 920;
  margin-left: calc(-560 / 880 * 100%); margin-top: calc(-240 / 880 * 100%);
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: var(--tone-9);
}
.hero--nogl .hero__canvas { visibility: hidden; }
.hero--nogl .hero__art { aspect-ratio: auto; height: 48px; }

@media (min-width: 1024px) {
  .hero { padding-top: 0; container-type: inline-size; }
  .hero__stage {
    --u: max(0.875px, calc(100cqw / 1440));
    display: block; position: relative; width: calc(1440 * var(--u)); height: calc(920 * var(--u));
  }
  .hero__art { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .hero--nogl .hero__art { height: auto; }
  .hero__canvas { width: 100%; height: 100%; margin: 0; }
  /* copy sits on the shader's text boxes: B0 48,120-760,245 · B1 48,262-580,372 · B2 48,388-570,470 */
  .hero__copy { position: absolute; inset: 0; padding: 0; pointer-events: none; }
  .hero__copy > * { position: absolute; left: calc(48 * var(--u)); pointer-events: auto; }
  .hero__title {
    top: calc(121 * var(--u)); width: calc(712 * var(--u));
    font-size: calc(56 * var(--u)); line-height: calc(58.5 * var(--u)); letter-spacing: -0.036em;
  }
  .hero__sub {
    top: calc(263 * var(--u)); width: calc(540 * var(--u)); max-width: none; margin: 0;
    font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u));
  }
  .hero .waitlist { top: calc(392 * var(--u)); width: calc(520 * var(--u)); max-width: none; margin: 0; font-size: calc(15 * var(--u)); }
  .hero .waitlist__row { height: calc(48 * var(--u)); }
  .hero .waitlist__note { font-size: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
}

/* ---------- nav: compact and fixed-size at every width (lead) ---------- */
.nav, .nav { --u: 1px; }
@media (min-width: 0px) {
  .nav { height: 64px; padding-inline: var(--margin); }
  .nav__logo { font-size: 15px; line-height: 15px; }
  .nav__menu { gap: 20px; }
  .nav__links { gap: 20px; }
  .nav__links a { font-size: 14px; padding-block: 2px; }
  .nav__cta { height: 34px; padding-inline: 14px; font-size: 13px; }
}
@media (min-width: 1024px) { .nav { padding-inline: max(42px, calc(100vw * 48 / 1440)); } }

/* ---------- nav: fixed; transparent over the hero top, solid dark once scrolled (hero.js toggles .nav--solid) ---------- */
.nav {
  border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.nav--solid {
  background: rgb(10 11 12 / 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--tone-8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav--solid { background: rgb(10 11 12 / 0.96); }
}
main > section { scroll-margin-top: 72px; }