/* Hero: the headline, the store badges and "See it work", next to the paper
   list turning into the same items in the app. On phones the art sits right
   under the badges, at a size that keeps the whole story on the first screens. */
.hero { padding: 28px 0 40px; overflow: hidden; }
.hero__grid { display: grid; gap: 28px; align-items: center; }

.hero__title {
  font-size: clamp(1.95rem, 8.3vw, 3.5rem);
  line-height: 1.02; font-weight: 800; letter-spacing: -0.04em;
}
.hero__title span { color: var(--teal); }
.hero__sub { margin-top: 16px; max-width: 30em; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.hero__badges { margin-top: 24px; }
.hero__demo-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; }

.hero__art {
  position: relative; display: flex; justify-content: flex-end; align-items: flex-start;
  width: 100%; max-width: 350px; margin: 0 auto; padding-left: 112px;
}
.hero__phone { --phone-w: 218px; }
.hero__paper { --paper-w: 128px; position: absolute; left: 0; top: 60px; z-index: 2; }
.hero__arrow { position: absolute; z-index: 3; left: 70px; top: 6px; width: 56px; height: auto; }

@media (min-width: 960px) {
  .hero { padding: 56px 0 72px; }
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 32px; }
  .hero__art { max-width: 500px; padding-left: 176px; margin: 0 0 0 auto; }
  .hero__phone { --phone-w: 300px; }
  .hero__paper { --paper-w: 196px; top: 96px; }
  .hero__arrow { left: 104px; top: 18px; width: 84px; }
}

/* Paper to list, animated: a scan line reads down the paper, the arrow draws,
   and the real list screenshot is revealed one section at a time (Bakery, Dairy,
   Meat, Produce). It plays three times, then rests on the full list. Without
   motion (reduced-motion users) the page is simply the finished state. */
.hero__screen { position: relative; }
.hero__scan, .hero__reveal { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__paper { animation: paper-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
  @keyframes paper-in { from { opacity: 0; transform: translate(-16px, 10px) rotate(-9deg); } }

  .hero__scan {
    display: block; position: absolute; inset: 0; overflow: hidden; border-radius: 6px; pointer-events: none;
  }
  .hero__scan::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%;
    background: linear-gradient(to bottom, rgba(11, 107, 100, 0), rgba(11, 107, 100, 0.16) 80%, rgba(11, 107, 100, 0.55) 84%, rgba(11, 107, 100, 0) 90%);
    animation: hero-scan 9s ease-in-out 0.4s 2.9 both;
  }
  .hero__arrow path { stroke-dasharray: 1; animation: hero-arrow 9s ease-out 0.4s 2.9 both; }

  /* Covers the list area of the screenshot (rows sit between 28% and 78% of its height). */
  .hero__reveal {
    display: block; position: absolute; left: 0; right: 0; top: 27.9%; height: 49.8%;
    background: #FBF9F5; pointer-events: none;
    animation: hero-reveal 9s cubic-bezier(0.3, 0.7, 0.3, 1) 0.4s 2.9 both;
  }

  @keyframes hero-scan {
    0%, 2% { transform: translateY(-100%); opacity: 0; }
    4% { opacity: 1; }
    15% { transform: translateY(455%); opacity: 1; }
    17%, 100% { transform: translateY(455%); opacity: 0; }
  }
  @keyframes hero-arrow {
    0%, 15% { stroke-dashoffset: 1; opacity: 1; }
    21%, 90% { stroke-dashoffset: 0; opacity: 1; }
    95% { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 1; opacity: 0; }
  }
  @keyframes hero-reveal {
    0%, 21% { clip-path: inset(0 0 0 0); opacity: 1; }
    24%, 27% { clip-path: inset(21.6% 0 0 0); opacity: 1; }
    30%, 33% { clip-path: inset(55.4% 0 0 0); opacity: 1; }
    36%, 39% { clip-path: inset(77.3% 0 0 0); opacity: 1; }
    42%, 90% { clip-path: inset(100% 0 0 0); opacity: 1; }
    91% { clip-path: inset(0 0 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
  }
}