/* Phone layout for /beamng.html (loaded at (max-width: 760px)). */
/* The page's own 860px rule already stacks the hero and the steps; this
   tightens it for a phone: 16px side padding, a smaller headline, full-width
   buttons that stay thumb-sized, and less air between the bands. */

.hero { padding: 18px 0 24px; }
.hero .shell { gap: 20px; }
.hero h1 { font-size: 2.1rem; line-height: 1.12; margin: 10px 0 12px; }
.hero .lede { font-size: 1rem; margin-bottom: 20px; }
.shell { padding-left: 16px; padding-right: 16px; }

.ctas { flex-direction: column; gap: 10px; }
.ctas .btn { width: 100%; justify-content: center; min-height: 48px; }

.shot img { border-radius: 10px; }
.shot figcaption { font-size: .8rem; }

section.band { padding: 32px 0; }
.steps { gap: 18px; }
.cta-band h2 { font-size: 1.5rem; }