/* The problem page hero (Jaycee's pick, Nov 11): her Figma belt with the headline in the gap between the machine
   and the rocket. Mobile first: on phones it stacks as headline, button, belt. The gap layout starts at 960px.
   The other hero variations (Stage, Windows, Billboard, Belt, 3D) were removed the same day. */

.vhero.vh { min-width: 0; }
.vh-belt { display: block; width: 100%; max-width: 1200px; height: auto; }
.vhero.vh-between { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; text-align: center; }
.vh-between .vh-text { display: grid; justify-items: center; }
.vh-between .hero-actions { justify-content: center; }
/* The "Works in" label lines up with the left edge of its logos. */
.vh-between .works { justify-items: start; text-align: left; }
.vh-between .works-l { align-self: flex-start; text-align: left; }

@media (min-width: 960px) {
  /* The headline and the button sit together in the gap, close to the belt. */
  .vh-between .vh-belt { grid-row: 1; grid-column: 1; }
  .vh-between .vh-text { grid-row: 1; grid-column: 1; z-index: 1; align-self: start; gap: 12px; width: min(46%, 560px); margin-top: 7%; }
  .vpage .vhero.vh-between h1 { margin: 0; font-size: clamp(34px, 4.1vw, 60px); line-height: 1.02; }
  /* "Works in" stays with the button, never under the belt: under it here, beside it from 1200px. */
  .vh-between .hero-actions { gap: 10px 20px; }
}
/* In the narrow gap the block sits higher so "Works in" clears the review light. */
@media (min-width: 960px) and (max-width: 1199px) { .vh-between .vh-text { margin-top: 1%; } }
@media (min-width: 1200px) {
  .vh-between .vh-text { width: min(50%, 600px); }
  .vh-between .hero-actions { flex-wrap: nowrap; align-items: center; }
}