/* ── withmagpie.ai: the shipped-site layer ────────────────────
   styles.css is an exact copy of the Magpie design system and is
   overwritten on every export. Nothing hand written belongs in it.
   This file is the opposite: it is maintained by hand and never
   exported over. The design system is authored at desktop width,
   so everything that makes it survive a phone lives here.
   ───────────────────────────────────────────────────────────── */

/* The timeline bars are absolutely positioned by percentage. Below
   roughly 560px the drive-time label collides with the pickup bar,
   so the track scrolls sideways rather than scrambling. */
.mg-trackwrap { overflow-x: auto; }

@media (max-width: 1100px) {
  .mg-section { padding: 72px 40px; }
  .pg-nav, .pg-foot, .doc-nav, .doc-body, .doc-foot { padding-left: 40px; padding-right: 40px; }
  .mg-h1 { font-size: clamp(40px, 6.4vw, 76px); }
  .mg-h2 { font-size: clamp(30px, 4vw, 44px); }
}

@media (max-width: 900px) {
  .mg-grid-3, .mg-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .pg-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pg-sub { max-width: 62ch; }
  .mg-card--feature { padding: 24px; gap: 24px; }
  .mg-card--feature > div[style*="grid-template-columns"] { display: flex; flex-direction: column; }
}

@media (max-width: 680px) {
  .mg-section { padding: 48px 22px; }
  .pg-nav, .pg-foot, .doc-nav, .doc-body, .doc-foot { padding-left: 22px; padding-right: 22px; }
  .pg-nav { flex-wrap: wrap; row-gap: 14px; }
  .pg-nav .pg-navlink { display: none; }
  .pg-foot, .doc-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pg-footlinks { flex-wrap: wrap; }
  .mg-row { flex-wrap: wrap; }
  .mg-btn { width: 100%; }
  .mg-lede { font-size: 18px; }
  .mg-h3 { font-size: 21px; }
  .doc-sec h2 { font-size: 22px; }
}