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

html,
body {
  margin: 0;
  min-height: 100%;
  background: #ffffff;
  overflow-x: hidden;
}

body {
  display: flex;
  justify-content: center;
}

.frame-shell {
  width: min(100%, 6179px);
}

.frame-stage {
  position: relative;
  width: 100%;
  line-height: 1;
}

.frame-image {
  display: block;
  width: 100%;
  height: auto;
}

.thread-loop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.thread-loop-cover,
.thread-loop-head,
.thread-loop-trail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thread-loop-cover {
  stroke: #ffffff;
  stroke-width: 90;
}

.thread-loop-trail {
  stroke: #141414;
  stroke-width: 72;
  opacity: 0.3;
  stroke-dasharray: 18 82;
  animation: stitchLoop 3s linear infinite;
}

.thread-loop-head {
  stroke: #141414;
  stroke-width: 74;
  stroke-dasharray: 10 90;
  animation: stitchLoop 3s linear infinite;
}

.copy-layer,
.hotspot-layer {
  position: absolute;
  inset: 0;
}

.copy-block {
  position: absolute;
  display: block;
  user-select: text;
  -webkit-user-select: text;
  color: rgba(0, 0, 0, 0.02);
  opacity: 0.02;
  cursor: text;
  white-space: nowrap;
  font-family: Inter, Arial, sans-serif;
  line-height: 1.15;
}

.copy-block:focus {
  outline: 2px dashed rgba(0, 0, 0, 0.25);
  outline-offset: 0.25rem;
}

.copy-block::selection {
  background: rgba(29, 29, 29, 0.18);
  color: rgba(0, 0, 0, 0.5);
}

.wordmark {
  left: 31.2%;
  top: 3.7%;
  font-size: clamp(1rem, 1.95vw, 3.35rem);
  font-weight: 700;
  letter-spacing: 0.42em;
}

.feature-copy {
  font-size: clamp(0.65rem, 1.02vw, 1.45rem);
  font-weight: 500;
}

.apps-title {
  left: 43%;
  top: 49.4%;
  font-weight: 700;
}

.apps-body {
  left: 53.6%;
  top: 59.13%;
  color: rgba(80, 80, 80, 0.03);
}

.tasks-title {
  left: 10.78%;
  top: 67.78%;
  font-weight: 700;
}

.tasks-body {
  left: 10.78%;
  top: 68.33%;
  color: rgba(80, 80, 80, 0.03);
}

.ai-title {
  left: 53.55%;
  top: 67.78%;
  font-weight: 700;
}

.ai-body {
  left: 53.55%;
  top: 68.34%;
  color: rgba(80, 80, 80, 0.03);
}

.section-title {
  left: 47.32%;
  top: 73.82%;
  transform: translateX(-50%);
  font-size: clamp(0.75rem, 1vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pricing-copy {
  font-size: clamp(0.55rem, 0.86vw, 1.2rem);
  font-weight: 600;
}

.basic-title {
  left: 10.66%;
  top: 75.56%;
}

.basic-price {
  left: 10.66%;
  top: 76.34%;
  font-size: clamp(0.75rem, 1.22vw, 1.8rem);
  font-weight: 700;
}

.plus-title {
  left: 39.5%;
  top: 75.56%;
}

.plus-price {
  left: 39.5%;
  top: 76.34%;
  font-size: clamp(0.75rem, 1.14vw, 1.7rem);
  font-weight: 700;
}

.enterprise-title {
  left: 68.32%;
  top: 75.56%;
}

.enterprise-price {
  left: 68.32%;
  top: 76.34%;
  font-size: clamp(0.75rem, 1.1vw, 1.65rem);
  font-weight: 700;
}

.trial-copy {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.trial-title {
  top: 84.16%;
  font-size: clamp(0.95rem, 1.3vw, 2rem);
  font-weight: 700;
}

.trial-body {
  top: 85.08%;
  font-size: clamp(0.65rem, 0.95vw, 1.35rem);
}

.trial-footnote {
  top: 86.94%;
  font-size: clamp(0.45rem, 0.55vw, 0.82rem);
}

.footer-copy {
  font-size: clamp(0.5rem, 0.74vw, 1.04rem);
}

.footer-tagline {
  left: 9.29%;
  top: 93.78%;
}

.footer-product {
  left: 90.41%;
  top: 93.12%;
}

.footer-integrations {
  left: 90.41%;
  top: 93.68%;
}

.footer-features {
  left: 90.41%;
  top: 94.2%;
}

.footer-pricing {
  left: 90.41%;
  top: 94.72%;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: transparent;
}

.hotspot:focus-visible,
.hotspot:hover {
  outline: 2px solid rgba(0, 0, 0, 0.22);
  outline-offset: 0.18rem;
}

.button {
  top: 77.5%;
  height: 0.75%;
}

.basic-button {
  left: 10.22%;
  width: 21.8%;
}

.plus-button {
  left: 39.07%;
  width: 21.8%;
}

.enterprise-button {
  left: 67.91%;
  width: 21.8%;
}

.start-free-button {
  left: 42.19%;
  top: 86.05%;
  width: 11.12%;
  height: 0.825%;
  border-radius: 81.5px;
}

.sign-in-link {
  left: 54.45%;
  top: 86.12%;
  width: 5.5%;
  height: 0.72%;
}

.footer-link {
  left: 90.32%;
  width: 6.4%;
  height: 0.43%;
}

.integrations-link {
  top: 93.52%;
}

.features-link {
  top: 94.04%;
}

.pricing-link {
  top: 94.57%;
}

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

@keyframes stitchLoop {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100;
  }
}

@media (max-width: 900px) {
  .copy-block {
    opacity: 0.03;
  }

  .hotspot:focus-visible,
  .hotspot:hover {
    outline-width: 1px;
  }
}

@media (max-width: 640px) {
  .frame-shell {
    width: 100%;
  }

  .copy-block {
    opacity: 0.04;
  }

  .copy-block,
  .hotspot {
    touch-action: manipulation;
  }
}