<div class="mech-slide">
  <div class="eyebrow">No single bet</div>

  <div class="headline">
    Many ways to prove<br>
    you're <em>one human</em>.
  </div>

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

  <div class="grid">
    <div v-click class="card">
      <div class="card-title">DIM<span class="dim-n">1</span></div>
    </div>
    <div v-click class="card live">
      <div class="card-title">DIM<span class="dim-n">2</span></div>
      <div class="card-body">Verify in under a minute.</div>
      <div class="card-tradeoff">live demo &middot; this conference</div>
    </div>
    <div v-click class="card">
      <div class="card-title">DIM<span class="dim-n">3</span></div>
    </div>
    <div v-click class="card ghost">
      <div class="card-title">DIM<span class="dim-n">n</span></div>
      <div class="card-body ghost-body">&hellip;</div>
    </div>
  </div>

  <div v-click class="kicker">
      Pick the one for your needs. 
  </div>
</div>

<style scoped>
.mech-slide {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 3.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mech-slide .eyebrow {
  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.55);
  margin-bottom: 1rem;
}
.mech-slide .headline {
  font-family: 'DM Serif Display', serif;
  font-size: 2.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 40rem;
}
.mech-slide .headline em { font-style: italic; }
.mech-slide .rule {
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.75rem 0 2rem;
}
.mech-slide .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  width: 100%;
  max-width: 52rem;
}
.mech-slide .card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 1rem 1rem 1.05rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 8.5rem;
}
.mech-slide .card.live {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
.mech-slide .card.ghost {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
}
.mech-slide .card.ghost .card-title {
  color: rgba(255, 255, 255, 0.35);
}
.mech-slide .card.ghost .card-title .dim-n {
  color: rgba(255, 255, 255, 0.4);
}
.mech-slide .ghost-body {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.2em;
  line-height: 1;
}
.mech-slide .card-flag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.1rem;
}
.mech-slide .card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1;
}
.mech-slide .card-title .dim-n {
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
}
.mech-slide .card-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.mech-slide .card-tradeoff {
  margin-top: auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.55rem;
}
.mech-slide .kicker {
  margin-top: 2rem;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  max-width: 38rem;
}
</style>

<!--
The Humanity system is very flexible.

It allows you to leverage multiple decentralized identity modules (DIMs), for your specific use case. 

These DIMS are essentially different proving mechanisms with the same outcome:

Providing a mathematical proof of individuality for a given key. 

But no matter which mechanism you pick, the information of which key is actually a unique individual, has to be stored somewhere. So who controls that? 
-->
