<div class="sentence-slide">
  <div class="setup">People don't use technology, they use products...</div>

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

  <div v-click class="punch">
    Products for <em>humans</em>.
  </div>

  <br/>
  <br/>

  <div v-click class="two-ways">
    <div class="way">
      <div class="way-num">01</div>
      <div class="way-line">to <em>use</em></div>
      <div class="way-sub">no complexity </div>
    </div>
    <div class="way-sep"></div>
    <div class="way">
      <div class="way-num">02</div>
      <div class="way-line">to <em>be human in</em></div>
      <div class="way-sub">provable &middot; private &middot; yours</div>
    </div>
  </div>
</div>

<style scoped>
.sentence-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;
}
.sentence-slide .setup {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
  max-width: 38rem;
}
.sentence-slide .dim {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}
.sentence-slide .dim em { font-style: italic; color: rgba(255, 255, 255, 0.75); }
.sentence-slide .rule {
  width: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.5rem 0;
}
.sentence-slide .rule.big {
  width: 4rem;
  background: rgba(255, 255, 255, 0.55);
  margin: 2rem 0;
}
.sentence-slide .rule.faint {
  background: rgba(255, 255, 255, 0.18);
  margin: 1.5rem 0;
}
.sentence-slide .punch {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.sentence-slide .punch em { font-style: italic; color: #ffffff; }
.sentence-slide .two-ways {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  column-gap: 2.5rem;
  margin-top: 0.5rem;
}
.sentence-slide .way {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-content: center;
  row-gap: 0.4rem;
  max-width: 14rem;
  min-height: 5.25rem;
}
.sentence-slide .way-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.4);
  line-height: 1;
}
.sentence-slide .way-line {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.1;
}
.sentence-slide .way-line em { font-style: italic; }
.sentence-slide .way-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  align-self: start;
}
.sentence-slide .way-sep {
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  align-self: stretch;
  margin: 0.25rem 0;
}
.sentence-slide .kicker {
  margin-top: 1.5rem;
  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.5);
  line-height: 2;
}
</style>

<!--
People don't use technology. They use products.

We said it for many years and we were just half right.

We stopped at products but we need to be precise:

(CLICK)

We need products for humans. 

(CLICK)

Products for humans to use (without the seed phrases and complexity)

And products for humans to be human in (where being a person is provable and private)

The difference matters, NOT about utility (packaging tech) but rather, human centered design

Most of the industry is focusing on the first part. 

The whole rest of the internet is about to get the second half wrong. 

The companies that get both right, will win the next twenty years. 

So what happens, if this all works out? 
-->
