<div class="cta-slide">
  <div class="headline">
    Build the train.<br>The rails are here.
  </div>

  <div class="rule big"></div>

  <div class="moves">
    <div v-click class="move">
      <div class="move-num">01</div>
      <div class="move-text">Products, not only infrastructure.</div>
    </div>
    <div v-click class="move">
      <div class="move-num">02</div>
      <div class="move-text">For <em>humans</em>. Outcomes, not features.</div>
    </div>
    <div v-click class="move">
      <div class="move-num">03</div>
      <div class="move-text">On ground no one owns.</div>
    </div>
    <div v-click class="move">
      <div class="move-num">04</div>
      <div class="move-text">Try it on <em>SummitNet</em>.</div>
    </div>
  </div>
</div>

<style scoped>
.cta-slide {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 4rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cta-slide .exists {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
.cta-slide .rule {
  width: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.25rem 0;
}
.cta-slide .rule.big {
  width: 4rem;
  background: rgba(255, 255, 255, 0.55);
  margin: 1.5rem 0;
}
.cta-slide .missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.cta-slide .missing-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.cta-slide .missing-thing {
  font-family: 'DM Serif Display', serif;
  font-size: 2.1rem;
  color: #ffffff;
}
.cta-slide .missing-thing em { font-style: italic; }
.cta-slide .headline {
  font-family: 'DM Serif Display', serif;
  font-size: 2.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}
.cta-slide .moves {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 38rem;
  text-align: left;
}
.cta-slide .move {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.85rem;
  align-items: baseline;
}
.cta-slide .move-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.85);
}
.cta-slide .move-text {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.cta-slide .move-text em { font-style: italic; color: #ffffff; }
.cta-slide .kicker {
  margin-top: 1.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 2;
}
</style>

<!--
- The cryptography exists. The registry no one owns exists. The proofs that protect privacy exist.
- What doesn't exist yet is the products 
- So I'm inviting you to 

- build products, not just infrastructure 
- Build them for humans — no raw technology, outcomes not features.
- And build them on ground no one owns — because a registry of humans on anything else is not a good thing
- The stake isn't a market. It's whether "how do I know if this is true?" has an answer on the internet your kids inherit.

Now. Remember what I told you at the beginning.
-->
