/* Phone layout. Pages use inline styles, so overrides here need !important. */
@media (max-width: 640px) {
  /* tighter page gutters and section rhythm */
  .sl section[style*="padding: 1"] { padding: 72px 20px !important; }
  .sl section#specs { padding: 8px 20px 64px !important; }
  .sl section#contact { padding: 88px 20px !important; }
  .sl footer { padding: 48px 20px 32px !important; }
  .sl div[style*="padding: 0 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .sl div[style*="padding: 32px"] { padding: 20px !important; gap: 20px !important; }
  .sl div[style*="padding: 96px 0 140px"] { padding: 36px 0 72px !important; gap: 22px !important; }

  /* header: logo + CTA on one row, module links as a full-width row below */
  .sl-nav { gap: 12px !important; padding: 16px 0 !important; }
  .sl-navlinks {
    order: 3; width: 100%; flex-wrap: nowrap !important; justify-content: space-between;
    gap: 0 8px !important; overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid rgba(212,212,216,.12); border-bottom: 1px solid rgba(212,212,216,.12);
  }
  .sl-navlinks::-webkit-scrollbar { display: none; }
  .sl-nav a.sl-link { padding: 12px 0 !important; font-size: 13px !important; white-space: nowrap; }
  .sl-nav .sl-navcta { min-height: 40px !important; padding: 0 16px !important; font-size: 13px !important; }

  /* scenario picker: one swipeable row instead of nine stacked buttons */
  .sl [aria-label="Scenarios"] {
    display: flex !important; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 -20px; padding: 2px 20px 8px; scroll-padding: 0 20px;
  }
  .sl [aria-label="Scenarios"]::-webkit-scrollbar { display: none; }
  .sl [aria-label="Scenarios"] .sl-tab { flex: none; scroll-snap-align: start; min-height: 44px; }
}