:root {
  /* Figma tokens */
  /* color/background/surface/default/default */
  --color-background-surface-default-default: #f7f2ec;
  /* color/content/text/default/default */
  --color-content-text-default-default: #202020;
  /* color/content/text/default/subtle */
  --color-content-text-default-subtle: #808080;
  /* color/content/icon/default/knockout */
  --color-content-icon-default-knockout: #ffffff;

  /* viewport/typography/body/default/small/default/* */
  --viewport-typography-body-default-small-default-font-family: "Montserrat";
  --viewport-typography-body-default-small-default-font-weight: 400;
  --viewport-typography-body-default-small-default-font-size: 14px;
  --viewport-typography-body-default-small-default-line-height: 20px;
  --viewport-typography-body-default-small-default-letter-spacing: 0;

  /* spacing tokens */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-24: 24px;
  --spacing-40: 40px;

  /* border tokens */
  --border-radii-full: 1000px;
  --border-radii-2xs: 8px;
  --border-radii-4xs: 4px;
  --border-weight-medium: 2px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  background: var(--color-background-surface-default-default);
}

.viewport-grid {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-background-surface-default-default);
}

.main-container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: var(--spacing-40);
  overflow: clip;
}

.main {
  position: relative;
  min-width: 0;
  flex: 1 0 0;
  height: 100%;
  overflow: clip;
}

.header-logo-jm-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}

.header-logo-jm {
  width: 80px;
  height: 80px;
  display: block;
  opacity: 1;
  transform: scale(1);
  transition: opacity 180ms ease, transform 180ms ease;
  transform-origin: center;
  animation:
    logo-intro 700ms ease-out 0s both,
    logo-forms-to-hover 180ms ease 2.8s forwards;
}

.header-logo-jm-square {
  position: absolute;
  inset: 33.33%;
  background: var(--color-content-text-default-default);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms ease, transform 180ms ease;
  transform-origin: center;
  animation:
    logo-square-to-hover 180ms ease 2.8s forwards,
    caret-blink 1s steps(1, end) 2980ms infinite;
}

@keyframes logo-intro {
  0% {
    transform: scale(0.35);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes logo-forms-to-hover {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes logo-square-to-hover {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.status-text {
  position: absolute;
  top: calc(50% + 40px + var(--spacing-24));
  left: 50%;
  text-align: center;
  color: var(--color-content-text-default-subtle);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  transform-origin: center;
  will-change: opacity;
  animation: text-intro 280ms ease-out 700ms both;
}

.status-text__primary,
.status-text__secondary {
  margin: 0;
  font-family: var(--viewport-typography-body-default-small-default-font-family), sans-serif;
  font-size: var(--viewport-typography-body-default-small-default-font-size);
  line-height: var(--viewport-typography-body-default-small-default-line-height);
  letter-spacing: var(--viewport-typography-body-default-small-default-letter-spacing);
}

.status-text__primary {
  font-weight: 500;
}

.status-text__secondary {
  font-weight: var(--viewport-typography-body-default-small-default-font-weight);
  font-style: italic;
}

.cta {
  position: absolute;
  left: 50%;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  border-radius: var(--border-radii-2xs);
  opacity: 0;
  transform: translate(-50%, 0);
  will-change: opacity;
  animation: cta-intro 360ms ease-out 4980ms both;
}

.cta__caption {
  margin: 0;
  color: var(--color-content-text-default-subtle);
  font-family: var(--viewport-typography-body-default-small-default-font-family), sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.button-icon-final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  border-radius: var(--border-radii-full);
  background: transparent;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.button-icon-final__state-layer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-icon-final[data-size="default"] .button-icon-final__state-layer {
  padding: var(--spacing-4);
}

.button-icon-final[data-size="small"] .button-icon-final__state-layer {
  padding: var(--spacing-4);
}

.button-icon-final__icon {
  position: relative;
  display: block;
  flex-shrink: 0;
}

.button-icon-final[data-size="default"] .button-icon-final__icon {
  width: 34px;
  height: 34px;
}

.button-icon-final[data-size="small"] .button-icon-final__icon {
  width: 16px;
  height: 16px;
}

.button-icon-final__icon-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.button-icon-final:is([data-state="pressed"], [data-state="active"], [data-state="enabled"]:active)
  .button-icon-final__icon-image {
  /* social-icon_linkedin.svg base fill is dark (#505050), force knockout in pressed state */
  filter: brightness(0) saturate(100%) invert(100%);
}

.button-icon-final[data-tone="default"]:is([data-state="active"], [data-state="pressed"]) {
  background: #3e3d3b;
}

.button-icon-final[data-tone="inverse"]:is([data-state="active"], [data-state="pressed"]) {
  background: #fff;
}

.button-icon-final:is([data-state="disabled"], :disabled, [aria-disabled="true"]) {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.button-icon-final[data-tone="default"][data-state="hovered"] .button-icon-final__state-layer {
  background: rgb(32 32 32 / 8%);
}

.button-icon-final[data-tone="default"][data-state="focused"] .button-icon-final__state-layer {
  background: rgb(32 32 32 / 12%);
}

.button-icon-final[data-tone="inverse"][data-state="hovered"] .button-icon-final__state-layer {
  background: rgb(207 207 207 / 8%);
}

.button-icon-final[data-tone="inverse"][data-state="focused"] .button-icon-final__state-layer {
  background: rgb(207 207 207 / 12%);
}

.button-icon-final[data-state="enabled"][data-tone="default"]:hover .button-icon-final__state-layer {
  background: rgb(32 32 32 / 8%);
}

.button-icon-final[data-state="enabled"][data-tone="default"]:focus-visible .button-icon-final__state-layer {
  background: rgb(32 32 32 / 12%);
}

.button-icon-final[data-state="enabled"][data-tone="inverse"]:hover .button-icon-final__state-layer {
  background: rgb(207 207 207 / 8%);
}

.button-icon-final[data-state="enabled"][data-tone="inverse"]:focus-visible .button-icon-final__state-layer {
  background: rgb(207 207 207 / 12%);
}

.button-icon-final[data-tone="default"][data-state="focused"][data-size="default"] {
  border: var(--border-weight-medium) solid #707070;
}

.button-icon-final[data-tone="inverse"][data-state="focused"][data-size="default"] {
  border: var(--border-weight-medium) solid #fff;
}

.button-icon-final[data-tone="default"][data-state="focused"][data-size="small"] {
  border: 1.5px solid #707070;
}

.button-icon-final[data-tone="inverse"][data-state="focused"][data-size="small"] {
  border: 1.5px solid #fff;
}

.button-icon-final[data-state="enabled"][data-tone="default"][data-size="default"]:focus-visible {
  border: var(--border-weight-medium) solid #707070;
}

.button-icon-final[data-state="enabled"][data-tone="inverse"][data-size="default"]:focus-visible {
  border: var(--border-weight-medium) solid #fff;
}

.button-icon-final[data-state="enabled"][data-tone="default"][data-size="small"]:focus-visible {
  border: 1.5px solid #707070;
}

.button-icon-final[data-state="enabled"][data-tone="inverse"][data-size="small"]:focus-visible {
  border: 1.5px solid #fff;
}

.button-icon-final[data-state="enabled"][data-tone="default"]:active {
  background: #3e3d3b;
}

.button-icon-final[data-state="enabled"][data-tone="inverse"]:active {
  background: #fff;
}

.button-icon-final[data-size="default"]:is(
    [data-tone="default"][data-state="enabled"],
    [data-tone="default"][data-state="hovered"],
    [data-tone="default"][data-state="focused"],
    [data-tone="default"][data-state="disabled"],
    [data-tone="inverse"][data-state="active"],
    [data-tone="inverse"][data-state="pressed"]
  )
  .button-icon-final__icon-image--default-dark {
  display: block;
}

.button-icon-final[data-size="default"]:is(
    [data-tone="default"][data-state="active"],
    [data-tone="default"][data-state="pressed"],
    [data-tone="inverse"][data-state="enabled"],
    [data-tone="inverse"][data-state="hovered"],
    [data-tone="inverse"][data-state="focused"],
    [data-tone="inverse"][data-state="disabled"]
  )
  .button-icon-final__icon-image--default-light {
  display: block;
}

.button-icon-final[data-size="small"]:is(
    [data-tone="default"][data-state="enabled"],
    [data-tone="default"][data-state="hovered"],
    [data-tone="default"][data-state="focused"],
    [data-tone="default"][data-state="disabled"],
    [data-tone="inverse"][data-state="active"],
    [data-tone="inverse"][data-state="pressed"]
  )
  .button-icon-final__icon-image--small-dark {
  display: block;
}

.button-icon-final[data-size="small"]:is(
    [data-tone="default"][data-state="active"],
    [data-tone="default"][data-state="pressed"],
    [data-tone="inverse"][data-state="enabled"],
    [data-tone="inverse"][data-state="hovered"],
    [data-tone="inverse"][data-state="focused"],
    [data-tone="inverse"][data-state="disabled"]
  )
  .button-icon-final__icon-image--small-light {
  display: block;
}

.button-icon-final[data-state="enabled"][data-size="default"][data-tone="default"]:active .button-icon-final__icon-image--default-dark,
.button-icon-final[data-state="enabled"][data-size="default"][data-tone="inverse"]:active .button-icon-final__icon-image--default-light,
.button-icon-final[data-state="enabled"][data-size="small"][data-tone="default"]:active .button-icon-final__icon-image--small-dark,
.button-icon-final[data-state="enabled"][data-size="small"][data-tone="inverse"]:active .button-icon-final__icon-image--small-light {
  display: none;
}

.button-icon-final[data-state="enabled"][data-size="default"][data-tone="default"]:active .button-icon-final__icon-image--default-light,
.button-icon-final[data-state="enabled"][data-size="default"][data-tone="inverse"]:active .button-icon-final__icon-image--default-dark,
.button-icon-final[data-state="enabled"][data-size="small"][data-tone="default"]:active .button-icon-final__icon-image--small-light,
.button-icon-final[data-state="enabled"][data-size="small"][data-tone="inverse"]:active .button-icon-final__icon-image--small-dark {
  display: block;
}

.ellipsis {
  display: none;
}

.ellipsis span {
  opacity: 0;
  animation: ellipsis-dot 1.2s infinite;
}

.ellipsis span:nth-child(1) {
  animation-delay: 0s;
}

.ellipsis span:nth-child(2) {
  animation-delay: 0.2s;
}

.ellipsis span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ellipsis-dot {
  0%,
  20% {
    opacity: 0;
  }

  40%,
  100% {
    opacity: 1;
  }
}

@keyframes text-intro {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes cta-intro {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* laptop (1439px - 1240px) */
@media (min-width: 1240px) and (max-width: 1439px) {
  .main-container {
    padding-inline: 36px;
  }
}

/* tablet-lg (1239px - 905px) */
@media (min-width: 905px) and (max-width: 1239px) {
  .main-container {
    padding-inline: 32px;
  }
}

/* tablet-sm (904px - 600px) */
@media (min-width: 600px) and (max-width: 904px) {
  .main-container {
    padding-inline: 24px;
  }
}

/* mobile (599px - 0px) */
@media (max-width: 599px) {
  .main-container {
    padding-inline: 16px;
  }

  .status-text {
    font-size: 13px;
    line-height: 18px;
  }
}