/* OTTOMOTIV3 — phone tidy-up. Loaded after each page's own styles; only applies under 700px.
   Even, full-width buttons and spec chips, no dangling separators in the section rail. */
@media (max-width: 700px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  /* section rail: scrolls, no dot separators, breathing room */
  .rail .sep { display: none; }
  .rail-in { gap: 18px; padding: 10px 18px; }
  /* hero chips + spec strips: one even column instead of ragged centered pills */
  .chips, .spec-strip { display: grid !important; grid-template-columns: 1fr; gap: 8px; justify-items: stretch; }
  .chips .chip, .spec-strip .spec { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 10px 12px; line-height: 1.45; }
  /* the rail scrolls sideways — fade the edge so a half word reads as "more", not a cut-off */
  .rail { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  /* any row of two or more buttons stacks into equal full-width buttons */
  .hero-cta, div:has(> .btn + .btn), p:has(> .btn + .btn) { display: grid !important; grid-template-columns: 1fr; gap: 10px; justify-items: stretch; }
  .hero-cta > .btn, div:has(> .btn + .btn) > .btn, p:has(> .btn + .btn) > .btn { width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; text-align: center; margin: 0; }
  /* tables that are wider than the phone keep their own scroll, with a hint they scroll */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}