:root {
  color-scheme: dark;
  background: #050505;
  --focus: #f9b21a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: start center;
  background: #050505;
  font-family: Arial, Helvetica, sans-serif;
}

.page-shell {
  position: relative;
  width: min(100vw, 1536px);
  aspect-ratio: 3 / 2;
  background: #050505;
  overflow: hidden;
}

.page-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.hotspot:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  background: rgba(249, 178, 26, 0.14);
}

.nav-logo {
  left: 2.5%;
  top: 1.2%;
  width: 26%;
  height: 7.5%;
}

.nav-analytics {
  left: 46.5%;
  top: 2.2%;
  width: 8.8%;
  height: 6%;
}

.nav-ai {
  left: 56.5%;
  top: 2.2%;
  width: 10.5%;
  height: 6%;
}

.nav-about {
  left: 68.6%;
  top: 2.2%;
  width: 7.4%;
  height: 6%;
}

.nav-contact {
  left: 76.8%;
  top: 2.2%;
  width: 8.8%;
  height: 6%;
}
.inner-page .nav-analytics {
  left: 38.5%;
  top: 1.7%;
  width: 8.8%;
  height: 5.8%;
}

.inner-page .nav-ai {
  left: 48.0%;
  top: 1.7%;
  width: 10.2%;
  height: 5.8%;
}

.ai-page .nav-analytics {
  left: 49.8%;
  top: 2.2%;
  width: 7.8%;
  height: 5.6%;
}

.ai-page .nav-ai {
  left: 59.0%;
  top: 2.2%;
  width: 8.5%;
  height: 5.6%;
}

.analytics-home .nav-analytics {
  left: 54.8%;
  top: 2.2%;
  width: 7.2%;
  height: 5.6%;
}

.analytics-home .nav-ai {
  left: 63.3%;
  top: 2.2%;
  width: 8.8%;
  height: 5.6%;
}

.nav-started {
  left: 88.9%;
  top: 1.1%;
  width: 10.0%;
  height: 5.8%;
}

.hero-analytics {
  left: 3.6%;
  top: 45.6%;
  width: 16.1%;
  height: 5.3%;
}

.hero-ai {
  left: 21.4%;
  top: 45.6%;
  width: 13.6%;
  height: 5.3%;
}

.card-analytics {
  left: 17.5%;
  top: 84.8%;
  width: 12.5%;
  height: 4%;
}

.card-ai {
  left: 61.5%;
  top: 84.8%;
  width: 11.6%;
  height: 4%;
}

.analytics-learn {
  left: 64.2%;
  top: 83.6%;
  width: 28.6%;
  height: 7.5%;
}

.page-learn-wide {
  left: 57.9%;
  top: 91.4%;
  width: 39.2%;
  height: 6.0%;
}

.case-study {
  left: 2.1%;
  top: 48.0%;
  width: 56.6%;
  height: 7.0%;
}

@media (max-aspect-ratio: 3 / 2) {
  body {
    place-items: center;
  }

  .page-shell {
    width: 100vw;
    max-height: 100vh;
  }
}

@media (min-aspect-ratio: 3 / 2) {
  .page-shell {
    height: 100vh;
    width: auto;
  }
}

/* Added links for product/leaderboard navigation. */
.active-leaderboards {
  left: 3.4%;
  top: 44.1%;
  width: 25.2%;
  height: 11.6%;
}

.historical-leaderboards {
  left: 29.4%;
  top: 44.1%;
  width: 24.8%;
  height: 11.6%;
}

.analytics-packages {
  left: 63.2%;
  top: 92.2%;
  width: 29.4%;
  height: 4.9%;
}

.lets-win-together {
  left: 66.9%;
  top: 89.8%;
  width: 29.9%;
  height: 7.8%;
}

.product-logo {
  left: 1.2%;
  top: 0.8%;
  width: 22.0%;
  height: 6.0%;
}

.product-nav-analytics {
  left: 32.5%;
  top: 1.7%;
  width: 7.8%;
  height: 4.6%;
}

.product-nav-ai {
  left: 42.0%;
  top: 1.7%;
  width: 10.2%;
  height: 4.6%;
}

.product-nav-about {
  left: 54.0%;
  top: 1.7%;
  width: 8.4%;
  height: 4.6%;
}

.product-nav-contact {
  left: 64.8%;
  top: 1.7%;
  width: 8.4%;
  height: 4.6%;
}

.product-nav-started {
  left: 88.8%;
  top: 0.8%;
  width: 10.2%;
  height: 5.6%;
}
.product-dashboard {
  left: 78.0%;
  top: 92.0%;
  width: 18.5%;
  height: 5.5%;
}

/* Updated full-page artwork nav and CTA hit areas. */
.responsive-art-page picture {
  display: block;
  width: 100%;
  height: 100%;
}

.responsive-art-page .nav-logo {
  left: 1.4%;
  top: 1.1%;
  width: 24.3%;
  height: 6.5%;
}

.responsive-art-page .nav-leaderboard {
  left: 30.7%;
  top: 2.2%;
  width: 10.2%;
  height: 5.0%;
}

.responsive-art-page .nav-analytics {
  left: 43.3%;
  top: 2.2%;
  width: 8.1%;
  height: 5.0%;
}

.responsive-art-page .nav-ai {
  left: 53.5%;
  top: 2.2%;
  width: 10.3%;
  height: 5.0%;
}

.responsive-art-page .nav-about {
  left: 65.7%;
  top: 2.2%;
  width: 8.2%;
  height: 5.0%;
}

.responsive-art-page .nav-contact {
  left: 75.8%;
  top: 2.2%;
  width: 8.2%;
  height: 5.0%;
}

.responsive-art-page .nav-started {
  left: 87.0%;
  top: 1.1%;
  width: 11.8%;
  height: 5.9%;
}

.analytics-home .nav-leaderboard {
  left: 36.6%;
}

.analytics-home .nav-analytics {
  left: 48.8%;
}

.analytics-home .nav-ai {
  left: 58.6%;
}

.analytics-home .nav-about {
  left: 70.0%;
}

.analytics-home .nav-contact {
  left: 79.2%;
}

.case-study-page .nav-analytics {
  left: 34.0%;
  top: 1.5%;
  width: 7.8%;
  height: 4.7%;
}

.case-study-page .nav-ai {
  left: 42.4%;
  top: 1.5%;
  width: 10.0%;
  height: 4.7%;
}

.case-study-page .nav-about {
  left: 53.3%;
  top: 1.5%;
  width: 8.3%;
  height: 4.7%;
}

.case-study-page .nav-contact {
  left: 61.8%;
  top: 1.5%;
  width: 7.8%;
  height: 4.7%;
}

.case-study-page .nav-started {
  left: 88.8%;
  top: 1.0%;
  width: 10.2%;
  height: 5.4%;
}

.sales-page .case-study {
  left: 2.0%;
  top: 51.2%;
  width: 55.4%;
  height: 6.2%;
}

.sales-page .lets-win-together {
  left: 62.4%;
  top: 91.0%;
  width: 33.8%;
  height: 7.5%;
}

.stranded-page .nav-leaderboard {
  left: 29.2%;
  top: 2.0%;
  width: 9.6%;
  height: 5.3%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.001);
}

.stranded-page .nav-analytics {
  left: 39.7%;
  top: 2.0%;
  width: 7.2%;
  height: 5.3%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.001);
}

.stranded-page .nav-ai {
  left: 47.8%;
  top: 2.0%;
  width: 9.2%;
  height: 5.3%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.001);
}

.stranded-page .nav-about {
  left: 58.0%;
  top: 2.0%;
  width: 8.1%;
  height: 5.3%;
  z-index: 21;
  background: rgba(0, 0, 0, 0.001);
}

.stranded-page .nav-contact {
  left: 67.0%;
  top: 2.0%;
  width: 8.1%;
  height: 5.3%;
  z-index: 22;
  background: rgba(0, 0, 0, 0.001);
}
.stranded-page .page-learn-wide {
  left: 58.5%;
  top: 86.8%;
  width: 38.8%;
  height: 10.8%;
}

.ai-discuss {
  left: 2.6%;
  top: 55.5%;
  width: 18.9%;
  height: 5.5%;
}

.ai-view-analytics {
  left: 22.7%;
  top: 55.5%;
  width: 18.5%;
  height: 5.5%;
}

.ai-get-in-touch {
  left: 74.6%;
  top: 90.5%;
  width: 19.3%;
  height: 6.3%;
}

.about-page {
  aspect-ratio: 1586 / 992;
}

.about-page .nav-contact {
  left: 75.8%;
  top: 2.2%;
  width: 8.2%;
  height: 5.0%;
}
  .about-twt {
    left: 1.0%;
    top: 44.8%;
    width: 84.0%;
    height: 17.0%;
    z-index: 999;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.001);
  }

.about-explore {
  left: 62.3%;
  top: 91.5%;
  width: 25.6%;
  height: 5.4%;
}
.contact-twt {
  left: 5.5%;
  top: 73.0%;
  width: 89.0%;
  height: 22.5%;
  z-index: 3;
}
@media (max-width: 700px) {
  body {
    place-items: start center;
  }

  .responsive-art-page {
    aspect-ratio: 864 / 1821;
    width: 100vw;
    height: auto;
    max-height: none;
  }

  .responsive-art-page .page-art {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .responsive-art-page .nav-logo {
    left: 2.8%;
    top: 0.8%;
    width: 47.0%;
    height: 4.2%;
  }

  .responsive-art-page .nav-leaderboard {
    left: 66.7%;
    top: 1.2%;
    width: 6.8%;
    height: 3.2%;
  }

  .responsive-art-page .nav-analytics,
  .responsive-art-page .nav-ai,
  .responsive-art-page .nav-about,
  .responsive-art-page .nav-contact {
    display: none;
  }

  .responsive-art-page .nav-started {
    left: 75.6%;
    top: 0.8%;
    width: 20.7%;
    height: 3.6%;
  }

  .analytics-home .active-leaderboards {
    left: 3.3%;
    top: 33.0%;
    width: 45.9%;
    height: 10.1%;
  }

  .analytics-home .historical-leaderboards {
    left: 51.0%;
    top: 33.0%;
    width: 45.9%;
    height: 10.1%;
  }

  .analytics-home .analytics-learn {
    left: 19.0%;
    top: 93.2%;
    width: 62.2%;
    height: 4.5%;
  }

  .stranded-page .page-learn-wide {
    left: 14.5%;
    top: 94.1%;
    width: 71.0%;
    height: 4.5%;
  }

  .case-study-page .analytics-packages {
    left: 8.8%;
    top: 93.8%;
    width: 82.4%;
    height: 4.8%;
  }

  .ai-discuss {
    left: 8.0%;
    top: 45.0%;
    width: 39.2%;
    height: 4.0%;
  }

  .ai-view-analytics {
    left: 51.8%;
    top: 45.0%;
    width: 40.0%;
    height: 4.0%;
  }

  .contact-page .contact-twt {
    left: 5.0%;
    top: 79.5%;
    width: 90.0%;
    height: 17.5%;
  }

  .ai-get-in-touch {
    left: 18.4%;
    top: 94.0%;
    width: 63.4%;
    height: 4.5%;
  }
}

@media (max-width: 900px) {
  .responsive-art-page {
    width: 100vw;
    height: auto;
  }

  .about-page {
    aspect-ratio: 1586 / 992;
  }

  .about-page .nav-logo {
    left: 1.4%;
    top: 1.1%;
    width: 24.3%;
    height: 6.5%;
  }

  .about-page .nav-leaderboard,
  .about-page .nav-analytics,
  .about-page .nav-ai,
  .about-page .nav-about,
  .about-page .nav-contact,
  .about-page .nav-started {
    display: block;
  }

  .about-page .nav-leaderboard {
    left: 30.7%;
    top: 2.2%;
    width: 10.2%;
    height: 5.0%;
  }

  .about-page .nav-analytics {
    left: 43.3%;
    top: 2.2%;
    width: 8.1%;
    height: 5.0%;
  }

  .about-page .nav-ai {
    left: 53.5%;
    top: 2.2%;
    width: 10.3%;
    height: 5.0%;
  }

  .about-page .nav-about {
    left: 65.7%;
    top: 2.2%;
    width: 8.2%;
    height: 5.0%;
  }

  .about-page .nav-contact {
    left: 75.8%;
    top: 2.2%;
    width: 8.2%;
    height: 5.0%;
  }

  .about-page .nav-started {
    left: 87.0%;
    top: 1.1%;
    width: 11.8%;
    height: 5.9%;
  }
  .about-twt {
    left: 1.0%;
    top: 44.8%;
    width: 84.0%;
    height: 17.0%;
    z-index: 999;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.001);
  }

  .about-explore {
    left: 62.3%;
    top: 91.5%;
    width: 25.6%;
    height: 5.4%;
  }
}