/* Real supplied screenshots: full composition, native aspect ratio, no added device frame. */
.product-proof {margin: 0; min-width: 0;}
.product-proof > a {display: block; width: 100%; border-radius: 16px;}
.product-proof img {display: block; width: 100%; height: auto; border-radius: 16px;}
.product-proof figcaption {margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: left;}
.product-proof a:focus-visible {outline: 2px solid var(--accent); outline-offset: 5px;}
.hero.product-hero {padding: 48px 0 64px; text-align: left;}
.product-hero .hero-layout {display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 64px;}
.product-hero .hero-copy-column {min-width: 0;}
.product-hero h1 {margin: 0; font-size: clamp(46px, 5vw, 68px);}
.product-hero .hero-copy {margin: 26px 0 0;}
.product-hero .trust {justify-content: flex-start;}
.product-hero .hero-icon {margin-bottom: 22px;}
.proof-workflow {list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; counter-reset: proof-step;}
.proof-step {counter-increment: proof-step; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0;}
.proof-step h3 {margin: 0 0 12px; font-size: 23px; line-height: 1.25;}
.proof-step h3::before {content: counter(proof-step, decimal-leading-zero); display: block; margin-bottom: 12px; color: var(--accent); font-size: 13px; letter-spacing: .08em;}
.proof-step p {margin: 0 0 24px; color: var(--muted);}
.proof-step .product-proof {max-width: 360px; margin-inline: auto;}
.proof-step:last-child {grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: 48px;}
.guide .guide-proof {max-width: 380px; margin: 32px auto 40px;}
@media (max-width: 1000px) {
  .product-hero .hero-layout {grid-template-columns: minmax(0, 1fr) 300px; gap: 32px;}
  .product-hero h1 {font-size: 48px;}
  .proof-step {padding: 22px;}
}
@media (max-width: 800px) {
  .product-hero .hero-layout {grid-template-columns: minmax(0, 1fr); gap: 32px;}
  .product-hero .product-proof {width: 100%; max-width: 380px; margin-inline: auto;}
  .product-hero .hero-copy-column {max-width: 680px;}
  .product-hero h1 {font-size: clamp(42px, 7vw, 58px);}
  .proof-workflow {grid-template-columns: minmax(0, 1fr);}
  .proof-step:last-child {grid-column: auto; display: block;}
}
@media (max-width: 420px) {
  .hero.product-hero {padding-top: 36px;}
  .proof-step {padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent;}
  .product-hero .hero-icon {width: 64px; height: 64px; border-radius: 16px;}
}
/* Bring actual UI into the first mobile scroll while keeping the download action above it. */
@media (max-width: 800px) {
  .product-hero .hero-layout {gap: 20px;}
  .product-hero .hero-copy-column {display: contents;}
  .product-hero .hero-icon {display: none;}
  .product-hero .eyebrow {order: 1; margin: 0;}
  .product-hero h1 {order: 2;}
  .product-hero .app-store-badge {order: 3;}
  .product-hero .hero-proof {order: 4;}
  .product-hero .hero-copy {order: 5; margin: 8px 0 0;}
  .product-hero .trust {order: 6; margin: 8px 0 0;}
}