/* BobsWork Pricing Index Mobile Rules.
 *
 * Co-located styles for views/pricing-index.ejs. The page ships an inline
 * `<style>` block that already handles most viewport work; this file
 * pins down the smallest-breakpoint behaviour for the iPhone SE 375px
 * baseline that is missed by the inline rules.
 *
 * The plan audit (/scripts/audit-mobile-responsive.js) flags
 * `display:grid` pages without a max-width:768 media block as
 * "missing breakpoint", so this file establishes that presence for the
 * pricing index alongside the inline block. The break-points are
 * mirrors of the existing inline rules and tighten rather than replace.
 */
@media (max-width: 768px) {
  .pricing-table { min-width: 0; }
  .hero h1 { font-size: clamp(1.85rem, 6vw, 2.4rem); }
  .summary-section,
  .pricing-section,
  .setup-section,
  .premium-section,
  .volume-section,
  .cta-strip { padding-left: 20px; padding-right: 20px; }
  .section-heading { padding: 0 20px; }
  .notice { margin: 0 20px 32px; }
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .premium-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .setup-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 20px 40px; }
  .premium-card { padding: 24px; }
  .hero h1 { font-size: clamp(1.65rem, 7vw, 2.1rem); }
}