.topbar {
  display: none !important;
}

.hero {
  min-height: 100svh !important;
  grid-template-rows: 1fr !important;
  padding-top: 0 !important;
}

.hero-copy {
  width: min(48vw, 40rem) !important;
  max-width: 40rem !important;
  padding-top: clamp(2rem, 5vh, 4rem) !important;
}

.lead {
  max-width: 40rem !important;
}

.avatar-stage {
  min-height: 100svh !important;
}

@media (max-width: 1080px) {
  .hero {
    grid-template-rows: 1fr !important;
  }

  .hero-copy {
    position: absolute !important;
    left: 1.4rem !important;
    right: 1.4rem !important;
    bottom: max(1.4rem, env(safe-area-inset-bottom)) !important;
    z-index: 5 !important;
    width: min(42rem, calc(100vw - 2.8rem)) !important;
    max-width: none !important;
    padding: 1.15rem 1.25rem 1.25rem !important;
    border: 1px solid rgb(23 23 23 / 0.18) !important;
    background: rgb(235 232 223 / 0.82) !important;
    backdrop-filter: blur(14px) !important;
  }

  .hero-copy h1 {
    font-size: clamp(4.25rem, 10vw, 5.9rem) !important;
  }

  .lead {
    max-width: 100% !important;
    margin-top: 1rem !important;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 100svh !important;
    grid-template-rows: 1fr !important;
  }

  .hero-copy {
    position: absolute !important;
    right: 1rem !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    left: 1rem !important;
    z-index: 5 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0.95rem 1rem 1rem !important;
    border: 1px solid rgb(23 23 23 / 0.18) !important;
    background: rgb(235 232 223 / 0.82) !important;
    backdrop-filter: blur(14px) !important;
  }

  .hero-copy .eyebrow {
    margin-bottom: 0.65rem !important;
    padding: 0.36rem 0.58rem !important;
    font-size: 0.64rem !important;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 19vw, 4.6rem) !important;
  }

  .lead {
    max-width: 100% !important;
    margin-top: 0.8rem !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    margin-top: 0.9rem !important;
  }

  .primary-action {
    min-height: 2.65rem !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.78rem !important;
  }

  .expression-controls {
    margin-top: 0.55rem !important;
    gap: 0.4rem !important;
  }

  .expression-controls button {
    min-height: 2.15rem !important;
    padding: 0.48rem 0.58rem !important;
    font-size: 0.72rem !important;
  }

  .readout {
    display: none !important;
  }

  .avatar-stage {
    min-height: 100svh !important;
  }

  .avatar-canvas {
    inset: -3% -14% 0 !important;
    width: 128% !important;
    height: 104% !important;
  }
}