/* A typographic hero with tactile, word-sized illustrations. */
.hero.hero-type {
  container-type: inline-size;
  padding-top: 67px;
  padding-bottom: 0;
}

.hero-type .hero-copy {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: 0;
  /* Keep the icons' multiply backdrop inside the translated stacking context. */
  background: var(--canvas);
  isolation: isolate;
  animation: none;
}

.hero-type .hero-copy::before {
  content: '';
  position: absolute;
  inset: -24px 0;
  z-index: -1;
  background: var(--canvas);
  pointer-events: none;
}

.hero-type h1 {
  font-size: clamp(2rem, 6.7cqw, 3.6875rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.hero.hero-type h1 > .hero-line {
  display: flex;
  align-items: center;
  gap: .19em;
  height: 1.08em;
  min-height: 0;
  white-space: nowrap;
}

.hero-type h1 > .hero-line::before,
.hero-type h1 > .hero-line::after { content: none; }

.hero-type .hero-phrase {
  display: inline-flex;
  align-items: center;
  gap: .19em;
  white-space: nowrap;
}

.hero-type .hero-icon {
  display: inline-block;
  flex: none;
  width: 1.38em;
  height: 1.28em;
  vertical-align: -.16em;
  mix-blend-mode: multiply;
}

.hero-type .hero-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-type .hero-icon-muted { width: 1.52em; height: 1.4em; margin-left: .09em; margin-right: .04em; }
.hero-type .hero-icon-burst { width: 1.43em; height: 1.4em; margin-right: -.03em; transform: rotate(-7deg); }
.hero-type .hero-icon-bubble { width: 1.18em; height: 1.18em; margin-left: .12em; mix-blend-mode: normal; transform: rotate(6deg); }

.hero-type .avatar-stack {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin: 0 .13em;
  vertical-align: -.12em;
}

.hero-type .avatar-stack img {
  width: 1.13em;
  height: 1.13em;
  border: 3px solid var(--canvas);
  margin-left: -.18em;
  border-radius: 50%;
  object-fit: cover;
}
.hero-type .avatar-stack img:first-child { margin-left: 0; }

.hero-type .hero-actions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.hero-type .hero-art { margin-top: 88px; }
.hero-type .hero-actions .button {
  --button-height: 60px;
  --button-icon: 44px;
  --button-inset: 7px;
  --button-left: 28px;
  --button-right: 72px;
  font-size: 16px;
}

@media (min-width: 601px) {
  .hero-type .hero-copy { transform: translateX(2.5%); }
}

@media (max-width: 900px) and (min-width: 601px) {
  .hero-type .hero-actions { margin-top: 44px; gap: 12px; }
  .hero-type .hero-art { margin-top: 80px; }
  .hero-type .hero-actions .button {
    --button-height: 60px;
    --button-icon: 44px;
    --button-inset: 7px;
    --button-left: 24px;
    --button-right: 68px;
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .hero.hero-type { padding-top: 48px; padding-bottom: 0; }
  .hero-type .hero-copy { width: 100%; padding-inline: 8px; }
  .hero-type h1 {
    font-size: clamp(1.55rem, 8.4cqw, 2.8rem);
    line-height: 1.14;
    letter-spacing: -.035em;
    text-wrap: pretty;
  }
  .hero.hero-type h1 > .hero-line { display: contents; white-space: normal; }
  .hero-type .hero-phrase { display: inline; white-space: nowrap; }
  .hero-type .hero-icon { width: 1.27em; height: 1.2em; vertical-align: -.19em; }
  .hero-type .hero-icon-muted,
  .hero-type .hero-icon-burst { width: 1.4em; height: 1.32em; }
  .hero-type .hero-icon-bubble { width: 1.15em; height: 1.15em; }
  .hero-type .avatar-stack { vertical-align: -.16em; margin-left: .14em; }
  .hero-type .avatar-stack img { width: 1em; height: 1em; border-width: 2px; }
  .hero-type .hero-revenue { white-space: nowrap; }
  .hero-type .hero-actions { flex-direction: column; gap: 12px; margin-top: 40px; }
  .hero-type .hero-art { margin-top: 72px; }
  .hero-type .hero-actions .button {
    width: 100%;
    --button-height: 60px;
    --button-icon: 44px;
    --button-inset: 7px;
    --button-left: 24px;
    --button-right: 66px;
    font-size: 15px;
  }
}