/* Narrow screens. Loaded after design.css and landing.css; corrects what the design export gets wrong below its
   desktop width. Keep each rule tied to the cause it fixes. */

/* Sections are ".wrap sec": .sec (padding: 96px 0 0) comes after .wrap (padding: 0 32px) and wipes its side
   padding, so below 1312px wide the text touches the screen edge. Restore it (16px on phones, below). */
.wrap.sec { padding-left: 32px; padding-right: 32px; }

@media (max-width: 1055px) {
  /* The section grid has 16 tracks and 15 gaps of 32px: 480px of gaps alone, wider than a phone, even though
     every block spans the full row here (design.css: .g16>* 1 / -1). One track does the same without the gaps. */
  .g16 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 671px) {
  .wrap.sec { padding-left: 16px; padding-right: 16px; }
  /* Long words and URLs in running text wrap instead of pushing past the edge. */
  main p, main li, main dd, main summary, footer p { overflow-wrap: anywhere; }

  /* Section intros: the desktop sizes are set inline by the export. */
  .g16 > h2.d { font-size: clamp(26px, 7vw, 32px) !important; }
  .g16 > p { font-size: 17px !important; }

  /* The pilot form fills the screen width instead of its desktop padding. */
  .pform { padding: 16px; }
  .pform input, .pform select, .pform textarea { min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px; }

  /* Buttons that sit side by side wrap onto two rows rather than overflowing. */
  .btn { white-space: normal; }
}