/* Phone-only section rhythm: adjacent 32px edges make a 64px gap.
   Hero padding stays at 32px, paired with the next content's 32px edge. */
@media (max-width:600px) {
  .hero { padding-block:32px!important; }
  main > section:not(.hero) { padding-block:32px; margin-block:0; }
  main > .hero + section { padding-top:32px; }

  /* A catalog's categories own their spacing, without an extra outer layer. */
  main > .category-nav + .section { padding-block:0; }
  .product-category:nth-child(n) { padding-block:32px; margin-block:0; }

  /* Price tables and promo groups use one explicit gap between siblings. */
  .pricing-content { padding-block:32px; }
  .pricing-content > .price-section { padding-block:0; margin:0 0 64px; }
  .pricing-content .price-heading { padding-block:0; }
  .pricing-content > .price-end { margin-top:0; }

  /* Service chapters share two 32px edges for one 64px gap. */
  .page-managed-services #layanan { padding-top:32px!important; }
  .service-row { padding-block:32px; }
  .service-row:first-child { padding-top:0; }
  .service-row:last-child { padding-bottom:0; }
  .footer { padding-top:32px; }
}