.navbar {
  opacity: 0;
}

.hero {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.hero .hero-container {
  width: 100%;
  height: 100%;
  padding: 5rem;
  position: relative;
}

.hero .hero-glows {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero .hero-glow {
  --glow: 2, 132, 199;
  background: radial-gradient(ellipse closest-side, rgba(var(--glow), 0.1) 0%, rgba(var(--glow), 0.095) 45%, rgba(var(--glow), 0.06) 70%, rgba(var(--glow), 0.02) 88%, rgba(var(--glow), 0) 100%);
  will-change: transform;
  border-radius: 50%;
  width: 100rem;
  height: 60rem;
  position: absolute;
  bottom: 0;
}

.hero .hero-glow.is--1 {
  left: 0;
  transform: translate(-32%, 40%);
}

.hero .hero-glow.is--2 {
  right: 0;
  transform: translate(32%, 40%);
}

.hero .hero-lines {
  pointer-events: none;
  z-index: -2;
  width: 100vw;
  height: auto;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -25%);
}

.hero .hero-meta {
  isolation: isolate;
  width: 100%;
  height: 170vmin;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.hero .hero-meta .hero-globe {
  z-index: -1;
  aspect-ratio: 1;
  height: 200vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero .hero-meta .hero-circles {
  z-index: -1;
  aspect-ratio: 1;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero .hero-meta .hero-symbol {
  z-index: 1;
  aspect-ratio: 1;
  width: 45rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -15%);
}

.hero .hero-meta .hero-white-layer {
  filter: blur(120px);
  background: #ffffffe7;
  border-radius: 100%;
  width: 100%;
  height: 60rem;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero .hero-marquee {
  --marquee-fade: 20rem;
  --marquee-hole: 26rem;
  --marquee-hole-fade: 16rem;
  z-index: 0;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(50% - var(--marquee-hole) - var(--marquee-hole-fade)), transparent calc(50% - var(--marquee-hole)), transparent calc(50% + var(--marquee-hole)), #000 calc(50% + var(--marquee-hole) + var(--marquee-hole-fade)), #000 calc(100% - var(--marquee-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(50% - var(--marquee-hole) - var(--marquee-hole-fade)), transparent calc(50% - var(--marquee-hole)), transparent calc(50% + var(--marquee-hole)), #000 calc(50% + var(--marquee-hole) + var(--marquee-hole-fade)), #000 calc(100% - var(--marquee-fade)), transparent 100%);
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.marquee-css {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.marquee-css__list {
  flex: none;
  align-items: center;
  display: flex;
  position: relative;
}

.marquee-css__item {
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  width: 8rem;
  height: 8rem;
  margin-right: 15rem;
  display: flex;
}

.marquee-css__item img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: 30s linear infinite translateX;
}

.hero .hero-marquee [data-css-marquee-list] {
  animation-play-state: paused;
}

.hero .hero-marquee.is--running [data-css-marquee-list] {
  animation-play-state: running;
}

.hero .hero-heading {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 70rem;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 15%);
}

.hero .hero-heading .hero-title {
  color: #0f172a;
  letter-spacing: -3.2px;
  text-align: center;
  font-size: max(40px, min(7.5rem + 5px, 150px));
  font-weight: 500;
  line-height: 100%;
}

.hero .hero-heading .hero-desc {
  color: gray;
  text-align: center;
  letter-spacing: -0.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

.hero .hero-heading .hero-actions {
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
}

.hero .hero-socials {
  justify-content: center;
  align-items: center;
  gap: 2rem;
  display: flex;
  position: absolute;
  bottom: 5rem;
  left: 5rem;
}

.hero .hero-socials .hero-social {
  cursor: pointer;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .hero .hero-socials .hero-social path[stroke] {
    transition: stroke 0.3s ease-out;
  }

  .hero .hero-socials .hero-social path[fill] {
    transition: fill 0.3s ease-out;
  }

  .hero .hero-socials .hero-social:hover path[stroke] {
    stroke: var(--blue);
  }

  .hero .hero-socials .hero-social:hover path[fill] {
    fill: var(--blue);
  }
}

.hero .hero-explore {
  color: gray;
  letter-spacing: 5px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 300;
  position: absolute;
  bottom: 5rem;
  right: 5rem;
}

@media (orientation: landscape) and (max-height: 900px) {
  .hero .hero-heading .hero-title {
    font-size: max(40px, min(6.5rem + 5px, 150px));
  }

  .hero .hero-heading {
    transform: translate(-50%, 20%);
  }

  .hero .hero-meta .hero-symbol {
    width: 45rem;
  }
}

@media (orientation: portrait) {
  .hero {
    --hero-scale: min(1, calc(100svh / 99rem));
  }

  .hero .hero-container {
    padding: 2.5rem;
  }

  .hero .hero-glow {
    display: none;
  }

  .hero .hero-meta {
    height: calc(106rem * var(--hero-scale));
  }

  .hero .hero-meta .hero-globe {
    height: calc(125rem * var(--hero-scale));
    transform: translate(-50%, -77%);
  }

  .hero .hero-meta .hero-symbol {
    width: calc(25rem * var(--hero-scale));
    transform: translate(-50%, -105%);
  }

  .hero .hero-meta .hero-white-layer {
    height: calc(30rem * var(--hero-scale));
    filter: blur(60px);
    top: 84%;
  }

  .hero .hero-marquee {
    --marquee-fade: 2rem;
    --marquee-hole: 12rem;
    --marquee-hole-fade: 6rem;
    top: 37%;
  }

  .marquee-css__item {
    width: 4rem;
    height: 4rem;
    margin-right: 2rem;
  }

  .hero .hero-heading {
    gap: 1.2rem;
    width: 34rem;
    transform: translate(-50%, 35%);
  }

  .hero .hero-heading .hero-title {
    letter-spacing: -0.1rem;
    font-size: 3.5rem;
    line-height: 105%;
  }

  .hero .hero-heading .hero-desc {
    letter-spacing: 0;
    width: 24rem;
    font-size: 1.2rem;
    line-height: 150%;
  }

  .hero .hero-heading .hero-actions {
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .hero .hero-socials {
    gap: 1.6rem;
    bottom: 3rem;
    left: 2.5rem;
  }

  .hero .hero-socials .hero-social {
    width: 1.8rem;
    height: 1.8rem;
  }

  .hero .hero-explore {
    letter-spacing: 0.3rem;
    font-size: 1.2rem;
    bottom: 3rem;
    right: 2.5rem;
  }

  .hero .hero-lines {
    top: min(50% + 24rem, 82%);
    transform: translate(0%);
  }

  .hero .hero-white-layer {
    display: none;
  }
}

.text {
  justify-content: center;
  height: 180svh;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.text .text-container {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: sticky;
  top: 0;
}

.text .text-container .text-heading {
  isolation: isolate;
  width: 130rem;
  position: relative;
  transform: translate3d(0, -20%, 0);
}

.text .text-container .text-heading .text-title {
  color: #8e8e8e;
  letter-spacing: -3.2px;
  text-align: center;
  font-size: max(40px, min(7.5rem + 5px, 140px));
  line-height: 100%;
}

.text .text-glow__wrap {
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 105vw;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (orientation: landscape) and (max-height: 900px) {
  .text .text-container .text-heading {
    transform: translate3d(0, 0, 0);
  }
}

@media (orientation: portrait) {
  .text {
    height: 150svh;
  }

  .text .text-container .text-heading {
    width: 39rem;
    transform: translate3d(0, -20%, 0);
  }

  .text .text-container .text-heading .text-title {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .text .text-glow__wrap {
    width: 104rem;
  }
}

.why {
  justify-content: center;
  align-items: center;
  padding: 20rem 0 10rem;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.why .why-container {
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  width: 100%;
  height: 100%;
  display: flex;
}

.why .why-container .why-heading {
  width: 95rem;
  position: relative;
}

.why .why-container .why-heading .why-glow {
  aspect-ratio: 1;
  pointer-events: none;
  /* feGaussianBlur stdDeviation: 200 over 1425x1444. Without its own layer it
     re-rasters per tile as the snap drags it in, which is the frame stall
     behind the flick. */
  will-change: transform;
  width: 80rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -20%);
}

.why .why-container .why-heading .why-title {
  color: var(--black);
  letter-spacing: -3.2px;
  text-align: center;
  font-size: max(40px, min(7.5rem + 5px, 140px));
  font-weight: 500;
  line-height: 100%;
}

.why .why-container .why-path {
  width: 102%;
  position: relative;
}

.why .why-container .why-path svg {
  width: 100%;
  height: auto;
}

.why .why-container .why-path svg.is--portrait {
  display: none;
}

.why .why-container .why-item {
  aspect-ratio: 1;
  width: 12rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0%, -37%);
}

.why .why-container .why-item.is--1 {
  top: 21%;
  left: 7.4%;
}

.why .why-container .why-item.is--2 {
  top: 22.5%;
  left: 31%;
}

.why .why-container .why-item.is--3 {
  top: 70%;
  left: 52.9%;
}

.why .why-container .why-item.is--4 {
  top: 40%;
  left: 72.7%;
}

.why .why-container .why-item.is--5 {
  top: 26%;
  left: 91%;
}

.why .why-container .why-desc {
  width: 65rem;
}

.why .why-container .why-desc p {
  color: var(--gray-secondary);
  text-align: center;
  letter-spacing: -0.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

.why .why-container .why-lines {
  width: 100%;
  position: absolute;
  top: 14rem;
  left: 0;
}

@media (orientation: portrait) {
  .why {
    padding: 8rem 0 6rem;
  }

  .why .why-container {
    gap: 1rem;
  }

  .why .why-container .why-heading {
    order: 1;
    width: 39rem;
  }

  .why .why-container .why-heading .why-glow {
    width: 50rem;
    transform: translate(-50%, 40%);
  }

  .why .why-container .why-heading .why-title {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .why .why-container .why-desc {
    order: 2;
    width: 32rem;
    margin-bottom: 4rem;
  }

  .why .why-container .why-desc p {
    font-size: 1.2rem;
  }

  .why .why-container .why-path {
    order: 3;
    width: 25rem;
  }

  .why .why-container .why-path svg.is--landscape {
    display: none;
  }

  .why .why-container .why-path svg.is--portrait {
    display: block;
  }

  .why .why-container .why-item {
    width: 5rem;
    transform: translate(-50%, -50%);
  }

  .why .why-container .why-item.is--1 {
    top: 2.6%;
    left: 41.4%;
  }

  .why .why-container .why-item.is--2 {
    top: 26%;
    left: 72.8%;
  }

  .why .why-container .why-item.is--3 {
    top: 39.7%;
    left: 31.3%;
  }

  .why .why-container .why-item.is--4 {
    top: 63.7%;
    left: 43.9%;
  }

  .why .why-container .why-item.is--5 {
    top: 85.9%;
    left: 70.7%;
  }

  .why .why-container .why-lines {
    top: 2rem;
  }
}

.products {
  justify-content: center;
  align-items: center;
  padding: 12rem 20rem;
  display: flex;
  position: relative;
}

.products .products-container {
  flex-direction: column;
  align-items: center;
  gap: 10rem;
  width: 100%;
  height: 100%;
  display: flex;
}

.products .products-heading {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.products .products-heading .products-title {
  color: var(--black);
  letter-spacing: -3.2px;
  font-size: max(40px, min(7.5rem + 5px, 140px));
  font-weight: 500;
  line-height: 100%;
}

.products .products-heading .products-meta {
  flex-direction: column;
  gap: 1.5rem;
  display: flex;
}

.products .products-heading .products-desc {
  flex-direction: column;
  gap: 1.5rem;
  width: 27rem;
  display: flex;
}

.products .products-heading .products-desc p {
  color: var(--gray-secondary);
  letter-spacing: -0.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

.products .products-cards {
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
  display: grid;
}

.products .products-cards .products-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 1.5rem;
  flex-direction: column;
  align-items: center;
  height: 100%;
  display: flex;
  overflow: hidden;
  box-shadow: 0 16px 32px -12px #585c5f1a;
}

.products .products-card__visual {
  width: 100%;
  overflow: hidden;
}

.products .products-card__content {
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 9rem;
  display: flex;
}

.products .products-card__content .products-card__title {
  color: var(--black);
  text-align: center;
  letter-spacing: -1px;
  font-size: max(18px, min(2.8rem + 5px, 50px));
  font-weight: 600;
}

.products .products-card__content .products-card__desc {
  color: var(--gray-secondary);
  text-align: center;
  letter-spacing: -0.16px;
  font-size: max(14px, min(1.4rem + 2px, 32px));
  font-weight: 500;
}

@media (orientation: portrait) {
  .products {
    padding: 6rem 2.5rem;
  }

  .products .products-container {
    gap: 5rem;
  }

  .products .products-heading {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .products .products-heading .products-title {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .products .products-heading .products-meta {
    align-items: center;
  }

  .products .products-heading .products-desc {
    align-items: center;
    gap: 2rem;
    width: 24rem;
  }

  .products .products-heading .products-desc p {
    text-align: center;
    font-size: 1.2rem;
  }

  .products .products-cards {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .products .products-card__content {
    gap: 1rem;
    padding: 1.5rem 2.5rem;
  }

  .products .products-card__content .products-card__title {
    letter-spacing: -0.4px;
    font-size: 1.8rem;
  }

  .products .products-card__content .products-card__desc {
    font-size: 1.2rem;
  }
}

.connection {
  justify-content: center;
  width: 100%;
  display: flex;
  position: relative;
}

.connection .connection-container {
  grid-template-columns: repeat(8, 1fr);
  align-items: start;
  gap: 2rem;
  width: 100%;
  padding: 10rem 12rem;
  display: grid;
}

.connection .connection-left {
  grid-area: 1 / 1 / auto / span 6;
  grid-template-rows: minmax(0, 1fr) auto;
  height: calc(100svh - 20rem);
  display: grid;
  position: sticky;
  top: 10rem;
}

.connection .connection-left__visual {
  width: 100%;
  height: 100%;
}

.connection .connection-left__content {
  flex-direction: column;
  gap: 1.5rem;
  display: flex;
}

.connection .connection-left__title {
  color: var(--black);
  letter-spacing: -3.2px;
  font-size: max(40px, min(7.5rem + 5px, 140px));
  font-weight: 500;
  line-height: 100%;
}

.connection .connection-left__desc {
  color: var(--gray-secondary);
  letter-spacing: -0.18px;
  font-size: max(14px, min(1.6rem + 2px, 32px));
  font-weight: 500;
}

.connection .connection-right {
  grid-area: 1 / 7 / auto / span 2;
  grid-template-columns: minmax(0, 1fr);
  margin-top: calc(100svh - 20rem);
  margin-bottom: 30svh;
  display: grid;
}

.connection .connection-right__content {
  flex-direction: column;
  align-items: stretch;
  gap: 8rem;
  padding: 5rem 3.5rem 5rem 18rem;
  display: flex;
  position: relative;
}

.connection .connection-right__visual {
  --connection-trail: 77;
  width: 12rem;
  position: absolute;
  top: 5rem;
  bottom: -20rem;
  left: 0;
}

.connection .connection-right__visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.connection .connection-right__item {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.connection .connection-right__item-divider {
  background: #e3e8ef;
  flex-shrink: 0;
  height: 1px;
}

.connection .connection-right__item__icon {
  width: 3rem;
  height: 3rem;
}

.connection .connection-right__item__stat {
  color: var(--black);
  text-align: center;
  font-size: 5.6rem;
  font-weight: 600;
  line-height: 120%;
}

.connection .connection-right__item.is--active .connection-right__item__stat {
  color: #176ff0;
}

.connection .connection-right__item__desc {
  color: var(--gray-secondary);
  text-align: center;
  letter-spacing: -0.14px;
  font-size: max(14px, min(1.2rem + 2px, 32px));
}

@media (orientation: portrait) {
  .connection {
    overflow: hidden;
  }

  .connection .connection-container {
    flex-direction: column;
    gap: 4rem;
    padding: 6rem 2.5rem;
    display: flex;
  }

  .connection .connection-left {
    flex-direction: column-reverse;
    gap: 3rem;
    width: 100%;
    height: auto;
    display: flex;
    position: static;
    top: auto;
  }

  .connection .connection-left__visual {
    width: 100%;
    height: 43rem;
    position: relative;
  }

  .connection .connection-left__visual img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .connection .connection-left__content {
    align-items: center;
    gap: 1rem;
  }

  .connection .connection-left__title {
    letter-spacing: -1.4px;
    text-align: center;
    font-size: 3.5rem;
  }

  .connection .connection-left__desc {
    text-align: center;
    width: 30rem;
    font-size: 1.2rem;
  }

  .connection .connection-right {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .connection .connection-right__content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0;
  }

  .connection .connection-right__visual {
    display: none;
  }

  .connection .connection-right__item-divider {
    width: 1px;
    height: 100%;
  }

  .connection .connection-right__item {
    flex: 1;
    gap: 0.5rem;
  }

  .connection .connection-right__item__icon {
    width: 2rem;
    height: 2rem;
  }

  .connection .connection-right__item__stat {
    font-size: 2.8rem;
  }

  .connection .connection-right__item__desc {
    letter-spacing: 0;
    font-size: 1.2rem;
  }
}

.support {
  --offset: 10rem;
  justify-content: center;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.support .support-container {
  width: 100%;
  padding: var(--offset) 12rem;
  grid-template-columns: repeat(8, 1fr);
  align-items: start;
  gap: 2rem;
  display: grid;
}

.support .support-pinned {
  top: var(--offset);
  height: calc(100svh - calc(var(--offset) * 2));
  grid-area: 1 / 1 / auto / span 5;
  grid-template-rows: auto minmax(0, 1fr);
  display: grid;
  position: sticky;
}

.support .support-heading {
  flex-direction: column;
  gap: 1.5rem;
  width: 60rem;
  max-width: 100%;
  display: flex;
}

.support .support-heading .support-title {
  color: #0f172a;
  letter-spacing: -3.2px;
  font-family: Manrope;
  font-size: max(40px, min(7.5rem + 5px, 150px));
  font-weight: 500;
  line-height: 100%;
}

.support .support-heading .support-desc {
  color: gray;
  letter-spacing: -0.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

.support .support-stage {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 2rem;
  min-height: 0;
  display: grid;
}

.support .support-col.is--nav {
  grid-column: 1 / span 3;
  display: none;
}

.support .support-col.is--phone {
  grid-column: 4 / span 2;
}

.support .support-stage .support-col {
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.support .support-stage .support-col.is--phone {
  overflow: visible;
}

.support .support-nav {
  background: red;
  width: 10rem;
  height: 5rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

.support .support-phone {
  position: absolute;
  inset: 0;
}

.support .support-phone img {
  width: 100%;
  height: 100%;
  display: block;
}

.support .support-col.is--content {
  grid-area: 1 / 6 / auto / span 3;
  width: 100%;
  padding-top: calc(100svh - 20rem);
  padding-bottom: 30svh;
  position: relative;
}

.support .support-content {
  width: 100%;
}

.support .support-content .support-content__sticky {
  flex-direction: column;
  gap: 30rem;
  padding-left: 6rem;
  display: flex;
  position: relative;
}

.support .support-content .support-path {
  --support-trail: 59;
  width: 19rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.support .support-content .support-path svg {
  width: 100%;
  height: 100%;
  display: block;
}

.support .support-content .support-item {
  flex-direction: column;
  gap: 2rem;
  display: flex;
}

.support .support-content .support-item + .support-item {
  margin-left: 18rem;
}

.support .support-item__title {
  color: var(--black);
  letter-spacing: -2.4px;
  font-size: max(25px, min(5.5rem + 5px, 90px));
  font-weight: 500;
}

.support .support-item__desc {
  color: gray;
  letter-spacing: -0.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

@media (orientation: portrait) {
  .support {
    --offset: 0rem;
    --tail: 10rem;
    padding-bottom: var(--tail);
  }

  .support .support-container {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .support .support-pinned {
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    background-color: #fff;
    grid-area: 1 / 1;
    height: 70svh;
    padding: 6rem 2.5rem 2rem;
    transform: translate3d(0, 0, 0);
  }

  .support .support-pinned:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#fff 0%, #fff0 100%);
    height: calc(9rem + 1px);
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
  }

  .support .support-heading {
    text-align: center;
    gap: 1rem;
    width: 33rem;
    margin-inline: auto;
  }

  .support .support-heading .support-title {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .support .support-heading .support-desc {
    letter-spacing: 0;
    font-size: 1.2rem;
  }

  .support .support-stage {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 4rem;
  }

  .support .support-col.is--nav {
    display: none;
  }

  .support .support-col.is--phone {
    grid-column: 1;
  }

  .support .support-col.is--content {
    z-index: 1;
    margin-bottom: calc(var(--tail) * -1);
    grid-area: 1 / 1;
    padding-top: calc(70svh + 4rem);
    padding-bottom: 0;
  }

  .support .support-content .support-content__sticky {
    text-align: center;
    align-items: center;
    gap: 10rem;
    padding-left: 0;
  }

  .support .support-content .support-path {
    display: none;
  }

  .support .support-content .support-item {
    gap: 1rem;
    width: 35rem;
  }

  .support .support-content .support-item + .support-item {
    margin-left: 0;
  }

  .support .support-item__title {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .support .support-item__desc {
    letter-spacing: 0;
    font-size: 1.2rem;
  }
}

.hero:not(.is--loaded) .hero-title,
.hero:not(.is--loaded) .hero-desc,
.hero:not(.is--loaded) .hero-actions,
.hero:not(.is--loaded) .hero-socials,
.hero:not(.is--loaded) .hero-explore,
.hero:not(.is--loaded) .hero-lines,
.hero:not(.is--loaded) .hero-white-layer,
.hero:not(.is--loaded) .marquee-css__item {
  opacity: 0;
  visibility: hidden;
}

.hero:not(.is--loaded) .hero-meta {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.hero:not(.is--loaded) .hero-meta .hero-globe {
  opacity: 0;
}

.hero:not(.is--loaded) .hero-meta .hero-circles {
  opacity: 1;
}

.hero:not(.is--loaded) .hero-meta .hero-symbol {
  transform: translate(-50%, -50%) scale(1.5);
}