:root {
  --bg: #0B0C0E;
  --surface: #121417;
  --text: #ECEEEC;
  --muted: #9DA2A6;
  --muted-2: #8A8F94;
  --accent: #8FAF98;
  --line: rgba(232, 234, 232, .08);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur: .7s;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --grid: 26px;
}

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

html {
  background: var(--bg);
  color-scheme: dark;
  scrollbar-width: none;
  -ms-overflow-style: none
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  color: var(--text);
  font-family: var(--body);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(146, 150, 154, .34) 1px, transparent 1.4px);
  background-size: var(--grid) var(--grid);
  background-position: center
}

html.js .hero__bg {
  background-image: none
}

#dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block
}

.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 40% at 50% 50%, rgba(11, 12, 14, .55) 0%, rgba(11, 12, 14, .26) 60%, transparent 100%)
}

html.flat .hero__bg,
html:not(.cine) .hero__bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%)
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  padding: 20px 22px;
  transition: padding .5s var(--ease)
}

.nav__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease)
}

.nav.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px
}

.nav.is-scrolled .nav__inner {
  background: rgba(18, 20, 23, .84);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  padding: 6px 14px
}

.brand {
  font: 600 1.22rem/1 var(--display);
  letter-spacing: -.05em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 3px
}

.brand__dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block
}

.nav__meta {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .02em
}

.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 22px 44px
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center
}

.kslot {
  --kh: 1.2;
  width: calc(125px*var(--kh));
  height: calc(40px*var(--kh));
  margin-bottom: 24px;
  position: relative
}

.kslot .kumo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%)
}

.tag {
  margin: 0 0 20px;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A3C2AC;
  padding: 5px 11px;
  border: 1px solid rgba(143, 175, 152, .28);
  border-radius: 999px;
  background: rgba(143, 175, 152, .05)
}

.headline {
  margin: 0;
  font: 500 clamp(2.05rem, 6.2vw, 4.6rem)/1.03 var(--display);
  letter-spacing: -.04em
}

.line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em
}

.line>span {
  display: block
}

.sub {
  margin: 18px 0 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: clamp(.9rem, 2vw, 1.04rem);
  line-height: 1.55
}

.cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 25px;
  font: 500 .88rem var(--body);
  color: #0B0C0E;
  background: var(--text);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease)
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(143, 175, 152, .5)
}

.btn:active {
  transform: translateY(0) scale(.97)
}

.btn__check {
  width: 0;
  opacity: 0;
  transition: width .4s var(--ease), opacity .4s var(--ease)
}

.btn__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none
}

.btn.is-joined {
  background: rgba(143, 175, 152, .14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(143, 175, 152, .4);
  cursor: default
}

.btn.is-joined:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(143, 175, 152, .4)
}

.btn.is-joined .btn__check {
  width: 16px;
  opacity: 1
}

.btn.just-joined .btn__ring {
  animation: ring .9s var(--ease)
}

@keyframes pop {
  0% {
    scale: .94
  }

  60% {
    scale: 1.03
  }

  100% {
    scale: 1
  }
}

.btn.just-joined {
  animation: pop .6s var(--ease)
}

@keyframes ring {
  0% {
    opacity: .8;
    transform: scale(1)
  }

  100% {
    opacity: 0;
    transform: scale(1.35, 1.9)
  }
}

.release {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  font-size: .7rem;
  color: var(--muted)
}

.release__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .8
}

.release__sub {
  color: var(--muted-2)
}

.count {
  margin: 0;
  font-size: .77rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.count__num {
  display: inline-block;
  color: var(--text)
}

.count__num.bump {
  animation: bump .6s var(--ease)
}

@keyframes bump {
  0% {
    transform: translateY(60%);
    opacity: 0
  }

  100% {
    transform: none;
    opacity: 1
  }
}


@media (max-height:560px) {
  .kslot {
    margin-bottom: 14px
  }

  .sub {
    margin-top: 14px
  }

  .cta {
    margin-top: 22px
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }
}

.desktop-only {
  display: contents
}

html.pending .hero {
  visibility: hidden
}

.deco,
.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.fl {
  position: absolute;
  color: rgba(146, 150, 154, .7);
  opacity: .6;
  pointer-events: none
}

.fl .acc {
  fill: var(--accent)
}

#fl-a {
  left: 8%;
  top: 22%;
  width: 65px;
  height: 65px
}

#fl-b {
  right: 9%;
  top: 28%;
  width: 49px;
  height: 49px
}

#fl-c {
  left: 14%;
  bottom: 14%;
  width: 54px;
  height: 54px
}

#fl-d {
  right: 12%;
  bottom: 18%;
  width: 58px;
  height: 58px
}

@media (max-width:1000px) {
  .floaters {
    display: none
  }
}

.notice {
  display: none;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 16px;
  position: relative;
  background-image: radial-gradient(circle, rgba(146, 150, 154, .16) 1px, transparent 1.4px);
  background-size: 44px 44px;
  background-position: center
}

.notice__kumo {
  position: relative;
  width: calc(125px*1.4);
  height: calc(40px*1.4);
  margin-bottom: 12px
}

.notice__kumo .kumo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%)
}

.notice h2 {
  margin: 0;
  max-width: 16ch;
  font: 500 clamp(1.6rem, 7vw, 2.2rem)/1.15 var(--display);
  letter-spacing: -.03em
}

.notice p {
  margin: 0;
  max-width: 30ch;
  color: var(--muted);
  line-height: 1.55
}

.notice__small {
  font-size: .8rem;
  letter-spacing: .04em
}

@media (max-width:767px),
(max-height:479px),
(orientation:portrait) {
  .desktop-only {
    display: none
  }

  .notice {
    display: flex
  }
}

.stage {
  position: relative
}

.showcase,
.mq,
.stmt,
.qa,
.foot {
  display: none
}

html.cine .stage {
  height: 100svh
}

html.cine .hero {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  pointer-events: none
}

html.cine .hero .btn {
  pointer-events: auto
}

html.cine .showcase {
  display: grid;
  position: absolute;
  inset: 0
}

html.flat .showcase {
  display: grid;
  min-height: 100svh
}

html.cine .mq,
html.flat .mq,
html.cine .stmt,
html.flat .stmt,
html.cine .qa,
html.flat .qa,
html.cine .foot,
html.flat .foot {
  display: block
}

.showcase {
  z-index: 1;
  place-content: center;
  justify-items: center;
  gap: 0;
  padding: 56px 22px 18px;
  pointer-events: none
}

.device {
  --sv-fade: 700ms;
  position: relative;
  width: min(900px, 86vw, calc((100svh - 210px)*1.7778));
  aspect-ratio: 16/9;
  pointer-events: none
}

.device__glow {
  position: absolute;
  inset: -6% -4% -14%;
  background: radial-gradient(closest-side at 50% 58%, rgba(232, 140, 110, .08), transparent)
}

.device__media {
  position: absolute;
  inset: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, .88) 69%, rgba(0, 0, 0, .62) 77%, rgba(0, 0, 0, .3) 86%, rgba(0, 0, 0, .1) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, .88) 69%, rgba(0, 0, 0, .62) 77%, rgba(0, 0, 0, .3) 86%, rgba(0, 0, 0, .1) 94%, transparent 100%)
}

.device__media picture,
.device__wall,
.sv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block
}

.device__wall,
.sv {
  object-fit: cover
}

.sv {
  opacity: 0;
  background: transparent;
  transition: opacity var(--sv-fade) var(--ease)
}

.sv.is-on {
  opacity: 1
}

.device__shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .32), transparent);
  pointer-events: none
}

.device__dockslot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0
}

.kumo--flat {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%)
}

@media (prefers-reduced-motion:reduce) {
  .sv {
    transition-duration: .01ms
  }
}

.sv-load {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease)
}

.sv-load::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 44%, rgba(11, 12, 14, .5), transparent 78%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: radial-gradient(closest-side at 50% 44%, #000, transparent 82%);
  mask-image: radial-gradient(closest-side at 50% 44%, #000, transparent 82%)
}

#media[data-load] .sv-load {
  opacity: 1
}

.sv-load__dots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 5px);
  grid-auto-rows: 5px;
  gap: 8px
}

.sv-load__dots i {
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: svdot 1.5s ease-in-out infinite;
  animation-play-state: paused
}

#media[data-load] .sv-load__dots i {
  animation-play-state: running
}

.sv-load__dots i:nth-child(5n+2) {
  animation-delay: .12s
}

.sv-load__dots i:nth-child(5n+3) {
  animation-delay: .24s
}

.sv-load__dots i:nth-child(5n+4) {
  animation-delay: .36s
}

.sv-load__dots i:nth-child(5n) {
  animation-delay: .48s
}

.sv-load__bar {
  position: relative;
  width: 112px;
  height: 1px;
  overflow: hidden;
  background: rgba(236, 238, 236, .14);
  border-radius: 1px
}

.sv-load__bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--sv-p, .06));
  transition: transform .4s var(--ease)
}

#media[data-load="buffering"] .sv-load__bar i {
  width: 34%;
  transform: none;
  animation: svslide 1.3s var(--ease) infinite
}

@keyframes svdot {

  0%,
  100% {
    opacity: .26;
    transform: scale(.8)
  }

  45% {
    opacity: .95;
    transform: scale(1.15)
  }
}

@keyframes svslide {
  0% {
    left: -34%
  }

  100% {
    left: 100%
  }
}

@media (prefers-reduced-motion:reduce) {
  .sv-load {
    transition-duration: .01ms
  }

  .sv-load__dots i {
    animation: none;
    opacity: .5
  }

  #media[data-load="buffering"] .sv-load__bar i {
    animation: none;
    width: 100%;
    opacity: .5
  }
}

.more {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s
}

.more[hidden] {
  display: none
}

.more.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s
}

.more__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 8, .56);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px)
}

.more__card {
  position: relative;
  width: min(420px, 100%);
  padding: 30px 28px 24px;
  border-radius: 18px;
  background: rgba(18, 20, 23, .8);
  border: 1px solid rgba(232, 234, 232, .1);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .4s var(--ease), transform .5s var(--ease)
}

.more.is-open .more__card {
  opacity: 1;
  transform: none
}

.more__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .3s var(--ease), background-color .3s var(--ease)
}

.more__x:hover {
  color: var(--text);
  background: rgba(232, 234, 232, .07)
}

.more__x svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round
}

.more__dots {
  display: flex;
  gap: 5px;
  margin-bottom: 18px
}

.more__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .9
}

.more__dots i:nth-child(2) {
  opacity: .5
}

.more__dots i:nth-child(3) {
  opacity: .22
}

.more__title {
  margin: 0 0 10px;
  font: 600 1.3rem/1.2 var(--display);
  letter-spacing: -.01em;
  color: var(--text)
}

.more__desc {
  margin: 0 0 22px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted)
}

.more__meta {
  margin: 0 0 24px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px
}

.more__meta div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: .76rem
}

.more__meta dt {
  color: var(--muted-2)
}

.more__meta dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text)
}

.more__meta dd i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(143, 175, 152, .16)
}

.more__ok {
  width: 100%;
  font: 500 .8rem var(--body);
  color: var(--text);
  background: rgba(143, 175, 152, .14);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(143, 175, 152, .42);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 38px;
  cursor: pointer;
  transition: background-color .3s var(--ease)
}

.more__ok:hover {
  background: rgba(143, 175, 152, .22)
}

.more :is(button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {

  .more,
  .more__card {
    transition-duration: .01ms;
    transform: none
  }
}

.kumo {
  --k: 1;
  --ear: 0px;
  --rt: calc(9px*var(--k));
  --edge: 1;
  --aura: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
  pointer-events: none;
  width: calc(125px*var(--k));
  height: calc(40px*var(--k));
  transition: opacity .35s var(--ease), visibility 0s
}

.kumo.kumo--gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s
}

.stage>.kumo {
  will-change: transform
}

.kumo__aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(125px*var(--k)*1.5);
  height: calc(40px*var(--k)*2.6);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(191, 227, 255, .07), transparent);
  opacity: var(--aura)
}

.kumo__body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  color: #E8EDF4;
  border-radius: var(--rt) var(--rt) calc(17.6px*var(--k)) calc(17.6px*var(--k));
  box-shadow: 0 0 0 1px rgba(232, 237, 244, calc(.11*var(--edge)))
}

.kumo__body::before,
.kumo__body::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--ear);
  height: var(--ear);
  pointer-events: none
}

.kumo__body::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--ear) - .5px), #000 var(--ear))
}

.kumo__body::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--ear) - .5px), #000 var(--ear))
}

.kumo__eyes {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block
}

.dock {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: clamp(-84px, -6.5vw, -34px);
  pointer-events: none
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  pointer-events: auto;
  background: rgba(14, 16, 19, .55);
  border: 1px solid rgba(232, 234, 232, .09);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2)
}

.chip {
  font: 500 .72rem var(--body);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  min-height: 30px;
  cursor: pointer;
  transition: color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease)
}

.chip:hover {
  color: var(--text)
}

.chip[aria-pressed="true"] {
  color: var(--text);
  background: rgba(143, 175, 152, .14);
  box-shadow: inset 0 0 0 1px rgba(143, 175, 152, .42)
}

.caption {
  margin: 0;
  min-height: 1.3em;
  font-size: .76rem;
  color: var(--muted);
  text-align: center
}

.dock__note {
  margin: 0;
  font-size: .66rem;
  color: var(--muted-2);
  text-align: center
}

.mq {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(56px, 9svh, 104px) 0 clamp(8px, 3svh, 32px)
}

.mq__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent)
}

.mq__row+.mq__row {
  margin-top: 14px
}

.mq__track {
  display: flex;
  width: max-content;
  backface-visibility: hidden
}

.mq.is-live .mq__track {
  animation: mq var(--dur, 40s) linear infinite;
  will-change: transform
}

.mq.is-live .mq__row--r .mq__track {
  animation-direction: reverse;
  animation-delay: -9s
}

@keyframes mq {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-25%, 0, 0)
  }
}

.mq__group {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none
}

.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-right: 12px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #101215;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 500 .82rem/1 var(--body);
  letter-spacing: .01em;
  white-space: nowrap;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease)
}

.pill svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
  transition: opacity .4s var(--ease), transform .4s var(--ease)
}

.pill:hover {
  background: #14171B;
  border-color: rgba(143, 175, 152, .38);
  color: var(--text)
}

.pill:hover svg {
  opacity: 1;
  transform: translateY(-1px)
}

@media (max-width:1000px) {
  .pill {
    height: 40px;
    margin-right: 10px;
    padding: 0 16px 0 13px;
    font-size: .78rem
  }

  .mq__row+.mq__row {
    margin-top: 10px
  }
}

@media (prefers-reduced-motion:reduce) {
  .mq__row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
    padding: 0 22px
  }

  .mq__row::-webkit-scrollbar {
    display: none
  }

  .mq.is-live .mq__track {
    animation: none
  }

  .mq__group[aria-hidden] {
    display: none
  }
}

.stmt {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 9svh, 104px) 22px clamp(8px, 2svh, 24px)
}

.stmt__wrap {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(28px, 5vw, 72px)
}

.stmt__col {
  min-width: 0
}

.stmt__h {
  margin: 0;
  max-width: 11ch;
  font: 500 clamp(1.7rem, 3.3vw, 3rem)/1.06 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
  color: var(--text);
  transition: color .6s var(--ease)
}

.stmt__p {
  margin: clamp(14px, 2.2svh, 22px) 0 0;
  max-width: 32ch;
  font-size: clamp(.86rem, 1.15vw, .95rem);
  line-height: 1.6;
  color: var(--muted);
  transition: color .6s var(--ease)
}

.stmt__col:hover .stmt__h {
  color: #fff
}

.stmt__col:hover .stmt__p {
  color: #B4B9BC
}

html.js .stmt__h,
html.js .stmt__p {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), color .6s var(--ease)
}

html.js .stmt__h {
  transition-delay: calc(var(--i) * .14s), 0s, 0s
}

html.js .stmt__p {
  transition-delay: calc(var(--i) * .14s + .18s), calc(var(--i) * .14s + .18s), 0s
}

html.js .stmt.is-in :is(.stmt__h, .stmt__p) {
  opacity: 1;
  transform: none
}

@media (max-width:1000px) {
  .stmt__wrap {
    column-gap: 28px
  }

  .stmt__h {
    font-size: clamp(1.6rem, 3.6vw, 1.9rem)
  }
}

@media (max-width:767px) {
  .stmt__wrap {
    grid-template-columns: 1fr;
    row-gap: clamp(36px, 6svh, 52px)
  }

  .stmt__h {
    max-width: none;
    font-size: clamp(1.7rem, 7vw, 2.2rem)
  }

  .stmt__p {
    max-width: 40ch
  }
}

@media (prefers-reduced-motion:reduce) {

  html.js .stmt__h,
  html.js .stmt__p {
    opacity: 1;
    transform: none
  }
}

.qa {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 12svh, 136px) 22px clamp(24px, 5svh, 56px)
}

.qa__wrap {
  max-width: 1120px;
  margin: 0 auto
}

.qa__head {
  max-width: 640px;
  margin-bottom: clamp(40px, 7svh, 72px)
}

.qa__eyebrow {
  margin: 0 0 18px;
  font: 500 .64rem var(--body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A3C2AC
}

.qa__title {
  margin: 0;
  font: 500 clamp(1.9rem, 3.8vw, 3rem)/1.06 var(--display);
  letter-spacing: -.04em
}

.qa__sub {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(.9rem, 1.4vw, 1rem);
  line-height: 1.55
}

.qa__list {
  border-top: 1px solid var(--line)
}

.qa__item {
  --qa-dur: .6s;
  position: relative;
  border-bottom: 1px solid var(--line)
}

.qa__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(143, 175, 152, .55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--qa-dur) var(--ease)
}

.qa__item.is-open::after {
  transform: scaleX(1)
}

.qa__h {
  margin: 0;
  font: inherit
}

.qa__q {
  display: grid;
  grid-template-columns: clamp(48px, 8vw, 96px) minmax(0, 1fr) 28px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: clamp(22px, 3.4svh, 32px) 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(236, 238, 236, .84);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .4s var(--ease)
}

.qa__q:focus-visible {
  outline-offset: -2px;
  border-radius: 4px
}

.qa__num {
  font: 500 .74rem var(--body);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  transition: color .5s var(--ease)
}

.qa__text {
  font: 500 clamp(1.1rem, 1.9vw, 1.5rem)/1.25 var(--display);
  letter-spacing: -.025em;
  padding-right: 20px
}

.qa__icon {
  width: 22px;
  height: 22px;
  justify-self: end;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  color: var(--muted);
  transition: color .5s var(--ease)
}

.qa__icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--qa-dur) var(--ease), opacity .35s var(--ease)
}

.qa__item.is-open .qa__v-line {
  transform: rotate(90deg) scaleY(0);
  opacity: 0
}

.qa__q:hover,
.qa__item.is-open .qa__q {
  color: var(--text)
}

.qa__q:hover .qa__icon {
  color: var(--text)
}

.qa__item.is-open .qa__num,
.qa__item.is-open .qa__icon {
  color: var(--accent)
}

.qa__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--qa-dur) var(--ease), visibility 0s linear var(--qa-dur)
}

.qa__item.is-open .qa__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--qa-dur) var(--ease), visibility 0s
}

.qa__clip {
  min-height: 0;
  overflow: hidden
}

.qa__a {
  max-width: calc(62ch + clamp(48px, 8vw, 96px));
  padding: 0 28px clamp(28px, 4svh, 40px) clamp(48px, 8vw, 96px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease)
}

.qa__item.is-open .qa__a {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease) .12s, transform .6s var(--ease) .08s
}

.qa__a p {
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.72
}

.qa__a p+p {
  margin-top: 14px
}

.qa__a .qa__label {
  margin: 0 0 8px;
  font: 500 .64rem var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2)
}

.qa__a p+.qa__label {
  margin-top: 24px
}

.qa__a p.qa__label+p {
  margin-top: 0
}

html.js .qa__head,
html.js .qa__list {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease)
}

html.js .qa__list {
  transition-delay: .15s
}

html.js .qa.is-in :is(.qa__head, .qa__list) {
  opacity: 1;
  transform: none
}

@media (max-width:900px) {
  .qa {
    padding-left: 22px;
    padding-right: 22px
  }

  .qa__a {
    padding-right: 8px
  }
}

@media (max-width:560px) {
  .qa__q {
    grid-template-columns: 40px minmax(0, 1fr) 24px
  }

  .qa__a {
    padding-left: 40px
  }

  .qa__text {
    padding-right: 12px
  }
}

@media (prefers-reduced-motion:reduce) {

  .qa__head,
  .qa__list,
  .qa__a,
  .qa__item.is-open .qa__a {
    transform: none !important
  }

  .qa__item::after,
  .qa__icon path,
  .qa__panel {
    transition-duration: .01ms !important;
    transition-delay: 0s !important
  }
}

.foot {
  position: relative;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(96px, 16svh, 176px) 22px 0;
  background: radial-gradient(ellipse 46% 38% at 50% 30%, rgba(143, 175, 152, .055), transparent 72%)
}

.foot__dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%)
}

.foot.is-in .foot__dots {
  opacity: 1
}

.foot__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto
}

.foot__eyes {
  width: clamp(200px, 20vw, 256px);
  aspect-ratio: 64/35.2;
  margin-bottom: clamp(26px, 5svh, 48px)
}

.foot__title {
  margin: 0;
  font: 500 clamp(2rem, 4.6vw, 3.6rem)/1.05 var(--display);
  letter-spacing: -.04em
}

.fline {
  display: block;
  overflow: hidden;
  padding-bottom: .1em
}

.fline>span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease) .1s
}

.fline+.fline>span {
  color: var(--muted);
  transition-delay: .24s
}

.foot.is-in .fline>span {
  transform: none
}

.foot__sub {
  margin: 18px 0 0;
  max-width: 36ch;
  color: var(--muted);
  font-size: clamp(.9rem, 1.4vw, 1rem);
  line-height: 1.55
}

.foot__cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.foot__sub,
.foot__cta,
.foot__nav,
.foot__bar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.foot__sub {
  transition-delay: .5s
}

.foot__cta {
  transition-delay: .64s
}

.foot__nav {
  transition-delay: .8s
}

.foot__bar {
  transition-delay: .95s
}

.foot.is-in :is(.foot__sub, .foot__cta, .foot__nav, .foot__bar) {
  opacity: 1;
  transform: none
}

.fcta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 8px 0 22px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: 500 .9rem var(--body);
  color: #0B0C0E;
  background: var(--text);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease)
}

.fcta:hover {
  box-shadow: 0 12px 32px -14px rgba(143, 175, 152, .55)
}

.fcta:active {
  transform: scale(.98)
}

.fcta__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: #0B0C0E;
  color: var(--text);
  transition: background-color .45s var(--ease), color .45s var(--ease)
}

.fcta__icon svg {
  grid-area: 1/1;
  transition: transform .5s var(--ease), opacity .4s var(--ease)
}

.fcta__go--in {
  transform: translateX(-170%)
}

.fcta:hover .fcta__go:not(.fcta__go--in),
.fcta:focus-visible .fcta__go:not(.fcta__go--in) {
  transform: translateX(170%)
}

.fcta:hover .fcta__go--in,
.fcta:focus-visible .fcta__go--in {
  transform: none
}

.fcta__ok {
  opacity: 0;
  transform: scale(.7)
}

.fcta.is-joined {
  background: rgba(143, 175, 152, .14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(143, 175, 152, .4);
  cursor: default
}

.fcta.is-joined .fcta__icon {
  background: rgba(143, 175, 152, .18);
  color: var(--accent)
}

.fcta.is-joined .fcta__go {
  opacity: 0;
  transform: none
}

.fcta.is-joined .fcta__ok {
  opacity: 1;
  transform: none
}

.fcta.just-joined {
  animation: pop .6s var(--ease)
}

.foot__wrap {
  max-width: 1120px;
  margin: clamp(72px, 12svh, 132px) auto 0
}

.foot__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line)
}

.fgroup {
  padding: 26px 24px 30px 0
}

.fgroup+.fgroup {
  padding-left: 24px;
  border-left: 1px solid var(--line)
}

.fgroup h3 {
  margin: 0 0 14px;
  font: 500 .64rem var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2)
}

.fgroup ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: .84rem
}

.fgroup li>span {
  color: var(--muted)
}

.fgroup a {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 0;
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: color .35s var(--ease), background-size .5s var(--ease), padding-left .5s var(--ease)
}

.fgroup a:hover,
.fgroup a:focus-visible {
  color: var(--text);
  background-size: 100% 1px;
  padding-left: 6px
}

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  color: var(--muted-2)
}

.foot__bar p {
  margin: 0
}

.foot__legal {
  display: flex;
  align-items: baseline;
  gap: 6px 18px;
  flex-wrap: wrap
}

.foot__legal .brand {
  font-size: 1.05rem
}

.foot__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted)
}

.pulse {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent)
}

.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: around 3.2s ease-out infinite
}

@keyframes around {
  0% {
    transform: scale(1);
    opacity: .55
  }

  70%,
  100% {
    transform: scale(3.4);
    opacity: 0
  }
}

@media (max-width:900px) {
  .foot__nav {
    grid-template-columns: 1fr 1fr
  }

  .fgroup:nth-child(3) {
    grid-column: 1/-1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line)
  }
}

@media (max-height:640px) {
  .foot {
    padding-top: 84px
  }

  .foot__wrap {
    margin-top: 64px
  }
}

.si {
  --si-size: 46px;
  --si-right: 24px;
  --si-bottom: 24px;
  --si-surface: rgba(18, 20, 23, .9);
  --si-border: var(--line);
  --si-ring: var(--accent);
  --si-track: rgba(232, 234, 232, .1);
  --si-icon: var(--muted);
  --si-dur: .4s;
  position: fixed;
  z-index: 12;
  right: max(var(--si-right), env(safe-area-inset-right, 0px));
  bottom: max(var(--si-bottom), env(safe-area-inset-bottom, 0px));
  width: var(--si-size);
  height: var(--si-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--si-icon);
  background: var(--si-surface);
  box-shadow: 0 0 0 1px var(--si-border), 0 8px 22px -12px rgba(0, 0, 0, .8);
  opacity: .72;
  transition: opacity var(--si-dur) var(--ease), background-color var(--si-dur) var(--ease), color var(--si-dur) var(--ease)
}

.si:not(.is-top) {
  opacity: 1
}

.si.is-quiet:not(.is-top) {
  opacity: .78
}

.si.is-top {
  opacity: .42
}

.si:hover,
.si:focus-visible {
  opacity: 1;
  background: #171A1E;
  color: var(--text)
}

.si__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}

.si__track,
.si__ring {
  fill: none;
  stroke-width: 1.5
}

.si__track {
  stroke: var(--si-track)
}

.si__ring {
  stroke: var(--si-ring);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: .8;
  transition: stroke-dashoffset .16s linear, opacity var(--si-dur) var(--ease)
}

.si:hover .si__ring,
.si:focus-visible .si__ring {
  opacity: 1
}

.si__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--si-dur) var(--ease)
}

.si:hover .si__arrow,
.si:focus-visible .si__arrow {
  transform: translateY(-2px)
}

@media (max-width:1240px) {
  .foot__bar {
    padding-right: calc(var(--si-size, 46px) + 30px)
  }
}

@media (prefers-reduced-motion:reduce) {

  .si__ring,
  .si__arrow,
  .si {
    transition: none
  }
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 18px
}

.nav__link {
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  opacity: .8;
  transition: opacity .3s var(--ease), color .3s var(--ease)
}

.nav__link:hover,
.nav__link:focus-visible {
  opacity: 1;
  color: var(--accent)
}

.nav__link[aria-current="page"] {
  opacity: 1;
  color: var(--accent)
}

.nav__meta {
  display: inline-flex;
  align-items: center;
  gap: 18px
}

.nav__meta::before {
  content: "";
  flex: none;
  width: 1px;
  height: 14px;
  background: rgba(232, 234, 232, .16)
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.count__num[hidden] {
  display: none
}

:is(.btn, .fcta)[aria-busy="true"] {
  cursor: progress;
  opacity: .72
}

:is(.btn, .fcta)[data-state="error"] {
  color: #E0968A;
  box-shadow: inset 0 0 0 1px rgba(224, 150, 138, .45)
}