/* Open2Agents, 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). */

/* ---------- 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 inline (waitlist.js, source "hero"); the base form styles live in waitlist.css */
.hero .hero__form { margin-top: 24px; max-width: 440px; }

/* 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; }
  /* the copy sits on the stage in design units; hero.js measures its real bounds and passes them to the
     shader as the text boxes the crowd keeps clear of (title, subtitle, form) */
  .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(109 * 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(246 * var(--u)); width: calc(720 * var(--u)); max-width: none; margin: 0;
    font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u));
  }
  /* the form: row 48 high, then the note on one 16 px line (it may run wider than the form) and the privacy
     link on its own line below, both flush with the form's left edge; the crowd's text boxes are fixed in
     hero.js and envelope this block in both languages (design y 350-442) */
  .hero .hero__form {
    top: calc(350 * var(--u)); width: calc(576 * var(--u)); max-width: none; margin: 0;
    font-family: var(--font-code); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u));
  }
  .hero__form .waitlist__row { height: calc(48 * var(--u)); }
  .hero__form input { padding-inline: calc(16 * var(--u)); font-size: calc(14 * var(--u)); }
  .hero__form button { padding-inline: calc(20 * var(--u)); font-size: calc(14 * var(--u)); }
  .hero__form .waitlist__note, .hero__form .waitlist__legal { margin: 0; padding: 0; min-height: 0; font-size: inherit; line-height: inherit; text-indent: 0; }
  .hero__form .waitlist__note { margin-top: calc(8 * var(--u)); white-space: nowrap; }
  .hero__form .waitlist__legal { margin-top: calc(4 * var(--u)); }
}

/* ---------- nav ----------
   Always solid #0A0B0C, 64 px, fixed. Desktop (>= 1024px, so the seven links fit on one line): logo | links, centred | ES/EN + waitlist button.
   Below 1024px: logo | waitlist button + a pixel menu toggle that opens a full-width dark panel with the
   links and ES/EN (hero.js: aria-expanded, Esc, focus). The active section's link gets aria-current="true"
   (hero.js, IntersectionObserver). Background tone-9; its bottom edge dissolves into the page through .nav__fade, a 44 px
   canvas drawn by hero.js with the section transitions' algorithm. */
/* anchors put the section top right under the nav bar (64 px; the fade strip overlaps the section); outranks the sections own 72 px */
html body main > section[id], html body #pie { scroll-margin-top: 64px; }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 64px; padding-inline: var(--margin);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  background: var(--tone-9); color: var(--bg);
}
@media (min-width: 1024px) { .nav { padding-inline: max(42px, calc(100vw * 48 / 1440)); } }
.nav a { text-decoration: none; }
.nav__logo {
  justify-self: start; display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 15px; letter-spacing: -0.02em; color: var(--bg);
}
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.nav__links a {
  display: block; padding-block: 6px;
  font-size: 14px; line-height: 20px; color: var(--tone-3); white-space: nowrap; transition: color .15s;
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--bg); }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 20px; }
.nav__lang {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-code); font-size: 12px; line-height: 1; letter-spacing: .04em; color: var(--tone-6);
}
.nav__lang a { color: var(--tone-4); padding: 6px 2px; transition: color .15s; }
.nav__lang a:hover, .nav__lang a[aria-current="page"] { color: var(--bg); }
.nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding-inline: 14px; background: var(--bg); color: var(--ink);
  font-size: 13px; line-height: 1; white-space: nowrap; transition: background .15s;
}
.nav__cta:hover { background: var(--tone-2); }
.nav__toggle {
  display: none; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0; cursor: pointer;
  background: var(--tone-9); color: var(--bg); border: 1px solid var(--tone-7); border-radius: 0;
}
.nav__toggle svg { width: 14px; height: 14px; }
.nav__toggle .nav__icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon-close { display: block; }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--ok-bright); outline-offset: 2px; }
/* the mobile panel */
.nav__panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  padding: 8px var(--margin) 28px; background: var(--tone-9);
  height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow: auto; overscroll-behavior: contain;
}
/* the open menu covers the whole viewport (above the hero form, its canvas and the nav fade); the page does not scroll under it */
html.nav-open { overflow: hidden; }
html.nav-open .nav__fade { display: none; }
.nav__panel[hidden] { display: none; }
.nav__panel .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
.nav__panel .nav__links li + li { border-top: 1px solid var(--tone-7); }
.nav__panel .nav__links a { padding-block: 14px; font-size: 18px; line-height: 24px; }
.nav__panel .nav__links a { color: var(--tone-4); }
.nav__panel .nav__links a:hover, .nav__panel .nav__links a[aria-current="true"] { color: var(--bg); }
.nav__panel .nav__lang { margin-top: 20px; font-size: 13px; }
@media (max-width: 1023px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav > .nav__primary, .nav__end > .nav__lang { display: none; }
  .nav__end { gap: 10px; }
  .nav__toggle { display: grid; }
}
@media (min-width: 1024px) { .nav__panel { display: none; } }
/* the nav's fade strip */
.nav__fade {
  position: absolute; left: 0; top: 100%; width: 100%; height: 44px; pointer-events: none;
  image-rendering: pixelated;
}