/* Mobile-only presentation. Desktop styles remain in the original stylesheets. */
@media (max-width: 900px) {
  /* Keep text-entry controls readable without focus zoom on iOS. */
  .welcome-fields input,
  .welcome-fields select,
  .welcome-notes textarea { font-size: 16px; }

  .welcome-products label { min-height: 44px; }
  .selection-bar { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 850px) {
  /* Introduce the pack before its artwork on the single-column layout. */
  .pack-detail-copy { grid-row: 1; }
}

@media (max-width: 600px) {
  /* All five navigation links fit without a sideways scroll. */
  .site-header .header-row { padding: 10px 16px 4px; row-gap: 2px; }
  .site-header .nav { gap: 6px; justify-content: space-between; font-size: 12px; }
  .site-header .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .header-row > .btn { padding-inline: 12px; font-size: 13px; min-height: 44px; white-space: nowrap; }

  .hero { padding-top: 24px; }
  .hero-copy { gap: 18px; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { width: 100%; }

  .pack-page { padding-top: 24px; }
  .pack-detail-copy { gap: 12px; }
  .pack-detail-copy .back-link { order: -5; }
  .pack-detail-copy > .mono-eyebrow { order: -4; }
  .pack-detail-copy h1 { order: -3; }
  .pack-detail-copy .pack-lede { order: -2; font-size: 16px; }
  .pack-detail-copy > .btn { order: -1; width: 100%; }
  .pack-includes li { padding-block: 5px; }
  .pack-enquiry-panel { padding: 20px 14px; }
  .welcome-fields { grid-template-columns: 1fr; }

  /* Preserve enough space for controls on phones with a home indicator. */
  .measurement-consent { bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; width: calc(100% - 24px); padding: 16px; max-height: 70dvh; overflow-y: auto; }
}

@media (max-width: 360px) {
  .site-header .logo-with-symbol { font-size: 22px; gap: 4px; }
  .site-header .logo-with-symbol img { width: 28px; height: 28px; }
  .site-header .header-row { column-gap: 8px; }
  .enquiry-page .picker-grid { grid-template-columns: 1fr; }
}