/* Shared presentation for Loom's focused product landing pages. */
html {
  scroll-padding-top: 82px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.hero-proof li {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(0, 122, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #0055ad;
  font-size: 0.8rem;
  font-weight: 800;
}

.hero .media {
  position: relative;
  width: min(100%, 360px);
  max-height: 610px;
  justify-self: center;
  overflow: hidden;
  border-color: rgba(0, 122, 255, 0.12);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 10%, rgba(0, 122, 255, 0.14), transparent 40%),
    #eef4fb;
  box-shadow: 0 30px 80px rgba(28, 58, 98, 0.15);
}

.hero .media img {
  height: 100%;
  max-height: 610px;
  object-fit: cover;
  object-position: top center;
}

.hero + section .card {
  position: relative;
  overflow: hidden;
  min-height: 174px;
  border-color: rgba(0, 122, 255, 0.1);
}

.hero + section .card::after {
  position: absolute;
  right: -34px;
  bottom: -48px;
  width: 108px;
  height: 108px;
  border: 18px solid rgba(0, 122, 255, 0.05);
  border-radius: 50%;
  content: "";
}

@media (max-width: 820px) {
  .hero {
    padding: 34px 0 30px;
  }

  .hero-grid {
    gap: 28px;
  }

  .hero h1 {
    margin: 14px 0;
    font-size: clamp(2.35rem, 11vw, 3.35rem);
    line-height: 0.98;
  }

  .hero .lead {
    font-size: 1.04rem;
    line-height: 1.52;
  }

  .hero .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .hero .button {
    width: auto;
  }

  .hero .secondary {
    min-height: 46px;
    padding: 0 10px;
    border-color: transparent;
    background: transparent;
    color: #0055ad;
  }

  .hero .media {
    width: min(78vw, 292px);
    height: 430px;
    max-height: 52vh;
    border-radius: 32px;
  }

  .hero .media img {
    max-height: none;
  }

  section {
    padding: 42px 0;
  }

  .hero + section .card {
    min-height: 0;
  }
}

@media (max-width: 430px) {
  .hero .button-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hero .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .media {
    animation: focused-product-arrival 720ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  @keyframes focused-product-arrival {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: none; }
  }
}