/* Phone only (<=640px, same cutoff as the footer): centre headings, short intro lines and CTA buttons (kickers/eyebrows stay left), bomarfood.com-style.
   Long paragraphs, lists, FAQ, the contact form, product-card text, tables, address blocks and the area-layanan lists stay left-aligned.
   Loaded on every public template (static pages + server.py pages). Nothing here applies at 641px and up. */
@media (max-width:640px){
  /* kickers / eyebrows stay LEFT on phone (Richard 17:49 PDT): "0N / ..." labels, About overlines, hero eyebrow, season greeting.
     Explicit left + stretch so they also stay left inside the centred flex intros below. */
  main .section-kicker,main .eyebrow,main .about-overline,main .season-greeting{text-align:left;align-self:stretch}
  /* product and city pages: the category / breadcrumb line right above the H1 */
  main>p:first-child:has(+h1){text-align:center}
  /* section headings */
  main h1,main h2,.more-page .quality-content h2{text-align:center}
  /* short intro lines directly under a heading (1-3 lines on phone) */
  .location-heading,.comparison-intro{align-items:center;text-align:center}
  .comparison-intro p{margin-left:auto;margin-right:auto}
  main figcaption h2+p{text-align:center}
  /* single CTA buttons: centred at their natural width (the hero button pair is already a full-width 2-up row) */
  main a.btn-dark,main a.about-button,main a.city-cta,main>a.btn{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;justify-content:center;text-align:center}
  main>a.btn+a.btn{margin-top:10px}
  /* the "Lihat 75 kota & kabupaten ... →" text link next to the 05 / Distribusi button */
  main .home-area-link{justify-content:center;text-align:center}
}