/* S0/S0x landing page layout. Mobile-first: single column; two-column hero
   from bp-md upward (design.md §3.5 responsive stance). */

.hero {
  padding-block-start: var(--space-8);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
/* .hero__copy carries no rules of its own (F1 cycle-2 review minor: document
   or drop) — it is kept, not dropped, because it is structurally load-bearing
   for .hero__grid: without this wrapper the eyebrow/H1/subhead would become
   three separate grid items instead of one column, breaking the two-column
   layout below. It exists purely as a grouping hook for the grid, by design. */
/* Mobile: copy first, then the tool. The original order:-1 put the form card
   above the H1, so at 375px the value prop landed ~860px below the fold and
   visitors saw a bare "What are you selling?" form with zero context. The
   compact hero type below keeps the form reachable within the first swipe. */
@media (max-width: 767px) {
  .hero {
    padding-block-start: var(--space-6);
  }
  .hero__grid {
    gap: var(--space-6);
  }
  .hero__copy .text-display {
    font-size: clamp(28px, 8vw, 36px);
  }
  .hero__copy .text-lg {
    font-size: 17px;
  }
}
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-12);
  }
}

/* (A `position: sticky` on .generator-card was removed here: .hero__grid uses
   align-items:start so the tool column shrink-wraps to the card's own height,
   giving sticky zero scroll range — it never engaged on any viewport.) */

/* auto-fit/minmax instead of a hard 3-across at 768px: tablets (768–1023px) were
   getting ~229px columns with 5-line-wrapped serif headings. This yields 2 roomy
   columns across the tablet band and 3 only once there's real width. */
.how-it-works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .how-it-works__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}