/* The Vouch app page */
.app-hero { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 104px)); padding-bottom: clamp(64px, 8vw, 120px); overflow: clip; position: relative; }
.app-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; background: radial-gradient(900px 500px at 80% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%); }
.app-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.app-hero-copy { display: grid; gap: 24px; }
.app-hero .h1 { max-width: 11ch; }
/* Three real screens in a row, centre raised. No overlap, no tilt. */
.app-hero-art { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: start; padding-bottom: 8%; }
.app-hero-art .phone { width: 100%; }
.app-hero-art .p1 { order: 2; }
.app-hero-art .p2 { order: 1; margin-top: 16%; }
.app-hero-art .p3 { order: 3; margin-top: 16%; }
@media (prefers-reduced-motion: no-preference) {
  .js .app-hero-art .phone { transition: transform 1.2s var(--spring-soft); }
  .js .app-hero-art .p2 { transition-delay: 0.12s; }
  .js .app-hero-art .p3 { transition-delay: 0.24s; }
  .js .app-hero-art:not(.in) .phone { transform: translateY(40px); }
}
.app-features .feature:first-child { padding-top: 0; }
.feature-copy .label { margin-bottom: -4px; }
.feature-copy .fine a { color: var(--green-ink); }
.app-dave .side-art { display: grid; place-items: end center; }
.app-dave .dave { width: min(320px, 80%); margin-bottom: -6px; }
.biz-quote { position: absolute; left: clamp(28px, 3.4vw, 48px); right: clamp(28px, 3.4vw, 48px); top: 20px; display: grid; gap: 14px; }
.biz-quote .rcard { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); color: var(--ink); }
.biz-arrow { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(189, 245, 61, 0.12); border: 1px solid rgba(189, 245, 61, 0.3); color: var(--lime); font-size: 0.86rem; font-weight: 500; }
.biz-arrow svg { width: 13px; height: 13px; }
@media (max-width: 1020px) {
  .app-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .app-hero-art { max-width: 640px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
  .app-hero .cta-row .btn { flex: 1 1 100%; }
  /* let the outer phones run off the edges so the centre screen stays readable */
  .app-hero-art { width: 136%; max-width: none; margin-left: -18%; }
}