/* The image contains only the approved objects. The page is their actual backdrop. */
.hero-scene.hero-seamless {
  --hero-knight-x: 0px;
  --hero-knight-y: 0px;
  --hero-phone-x: 0px;
  --hero-phone-y: 0px;
  --hero-badge-x: 0px;
  --hero-badge-y: 0px;
  --hero-note-y: 0px;
  --hero-floor: 527px;
}
.hero-seamless::before {
  inset: -10% -20% -6% -35%;
  z-index: -3;
  background:
    radial-gradient(ellipse at 77% 50%, #dea6ab25 0%, #e9e2d925 24%, transparent 61%),
    repeating-linear-gradient(0deg, transparent 0 59px, #521d2307 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 59px, #521d2307 59px 60px);
  mask-image: radial-gradient(ellipse at 67% 49%, #000 15%, transparent 67%);
  pointer-events: none;
}
.hero-seamless::after {
  content: '';
  position: absolute;
  width: 76%;
  height: 65px;
  top: var(--hero-floor);
  right: -8%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(ellipse, #25191718, #521d2305 49%, transparent 71%);
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-seamless .knight-art {
  object-fit: contain;
  mix-blend-mode: normal;
  mask-image: none;
  -webkit-mask-image: none;
  translate: var(--hero-knight-x) var(--hero-knight-y);
  transition: translate 260ms cubic-bezier(.2,.65,.25,1);
}
.hero-seamless .hero-phone {
  translate: var(--hero-phone-x) var(--hero-phone-y);
  transition: transform .5s, translate 300ms cubic-bezier(.2,.65,.25,1);
}
.hero-seamless .your-turn-sticker {
  translate: var(--hero-badge-x) var(--hero-badge-y);
  transition: translate 340ms cubic-bezier(.2,.65,.25,1);
}
.hero-seamless .profile-note {
  animation: none;
  translate: 0 var(--hero-note-y);
  transition: translate 360ms cubic-bezier(.2,.65,.25,1);
}
.hero-seamless.hero-in-view .knight-art,
.hero-seamless.hero-in-view .hero-phone,
.hero-seamless.hero-in-view .your-turn-sticker,
.hero-seamless.hero-in-view .profile-note { will-change: translate; }
@media (max-width: 1150px) {
  .hero-scene.hero-seamless { --hero-floor: 507px; }
}
@media (max-width: 760px) {
  .hero-scene.hero-seamless { --hero-floor: 385px; }
  .hero-seamless::before {
    inset: -13% -18% -10% -18%;
    mask-image: radial-gradient(ellipse at 61% 44%, #000 9%, transparent 68%);
  }
  .hero-seamless::after { width: 91%; right: -15%; height: 51px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-seamless .knight-art,
  .hero-seamless .hero-phone,
  .hero-seamless .your-turn-sticker,
  .hero-seamless .profile-note {
    translate: none !important;
    transition: none;
    will-change: auto !important;
  }
}

/* One real portrait and a clear founder byline, with room at every size. */
.hero-trust.founder-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  max-width: none;
  margin-top: 32px;
}
.hero-founders {
  display: grid;
  grid-template-columns: 88px max-content 16px;
  align-items: center;
  gap: 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.hero-founders-photo { width: 88px; height: 72px; overflow: hidden; border-radius: 3px; }
.hero-founders-photo > img {
  width: 88px;
  height: 72px;
  object-fit: cover;
  object-position: 50% 12%;
  transform: scale(1.5);
  transform-origin: 50% 22%;
}
.hero-founders-copy { display: grid; gap: 5px; }
.hero-founders-copy strong { font-size: 15px; line-height: 1.3; letter-spacing: -.025em; }
.hero-founders-copy > span { font-size: 10px; line-height: 1.4; color: #766c68; white-space: nowrap; }
.founders-arrow { width: 16px; height: 16px; color: #521d23; transition: transform 180ms ease; }
.hero-founders:hover { border-bottom-color: #521d232b; }
.hero-founders:hover .founders-arrow { transform: translate(2px,-2px); }
.hero-trust .hero-assurance { display: grid; gap: 3px; padding-left: 20px; border-left: 1px solid var(--line); font-size: 10px; line-height: 1.4; }
.hero-assurance > * { white-space: nowrap; }
@media (max-width: 1150px) {
  .hero-trust.founder-signature { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-founders { justify-self: start; }
  .hero-trust .hero-assurance { display: flex; flex-wrap: wrap; gap: 4px 13px; padding-left: 0; border-left: 0; }
  .hero-assurance b { padding-left: 13px; border-left: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .hero-trust.founder-signature { margin-top: 26px; gap: 10px; }
  .hero-founders { grid-template-columns: 88px max-content 16px; gap: 12px; }
  .hero-trust .hero-assurance { font-size: 10px; }
}