.landing-mode .annotation {
  display: none;
}

.landing {
  display: grid;
  gap: calc(var(--space-6) * 1.5);
  padding: clamp(2.5rem, 8vw, 5rem) 0 calc(var(--space-6) * 1.5);
}

.landing-copy {
  display: grid;
  gap: var(--space-3);
  width: min(100%, 48rem);
}

.landing-title {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(2.4rem, 7.4vw, 4.6rem);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.landing-deck {
  max-width: 38rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.98rem, 2.4vw, 1.06rem);
  line-height: 1.55;
}

.landing-example {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  padding: calc(var(--space-6) * 1.25) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.landing-demo-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.landing-example-text {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-flow-arrow {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-family: "Fraunces", serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1;
}

.landing-token-line {
  min-height: 0;
  align-items: center;
  align-content: center;
}

.landing-token-line .token {
  font-size: clamp(0.96rem, 1.7vw, 1.08rem);
}

.landing-hall-link {
  justify-self: end;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 48rem) {
  .landing-demo-flow {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .landing-flow-arrow {
    justify-self: start;
    transform: rotate(90deg);
  }

  .landing-hall-link {
    justify-self: start;
  }
}

@media (max-width: 36rem) {
  .landing {
    padding-top: calc(var(--space-6) * 1.75);
  }
}