/* MOBILE POLISH (2026-10-16). Phone-only rules, loaded last on every page that has the shared top bar.
   Built from measurements of apple.com and salesforce.com at 375px and of our own pages at 390px:
   - Apple and Salesforce: one idea per screen, headings 32px (hero up to 48px on a dark hero), body 16-17px,
     nothing under 12px, full-width or large pill buttons 36-52px tall, tile rails that swipe sideways instead
     of one long stack, tight 12px gaps.
   - Ours before: hero heading 51px, section padding 64-110px, about 60 text items under 12px on the homepage,
     twelve definition tiles stacked into 3,300px on a product page, a 3,160px tools section.
   To undo everything, delete the <link href="/mobile-polish.css"> line. */
@media (max-width: 700px) {

  /* Type scale */
  .pg-hero h1, .hero-h1, h1.pg-title { font-size: clamp(31px, 8.6vw, 38px) !important; line-height: 1.08 !important; letter-spacing: -.012em; }
  .sec-title, .pg-sec h2, .pg-cta h2, .hs h2, .ch-title { font-size: clamp(25px, 7vw, 30px) !important; line-height: 1.12 !important; }
  .pg-lead, .sec-sub, .pg-hero p, .hero-sub, .ch-sub { font-size: 16px !important; line-height: 1.5 !important; }
  .pg-hero .pg-lead, .hero-sub { max-width: 34ch; }

  /* Nothing under 12px (Apple and Salesforce never go below it on a phone) */
  .sec-label, .pg-kicker, .hs-tag, .pg-badge, .pv-plan, .plan-name, .plan-badge, .pv-areas-label, .save-pill,
  small, dt, th, time, .footer-copy, .hero-note, .dm-cap, .dm-replay, .plan-period, .roi-stat-lbl, .roi-label,
  .pricing-footnote, .pricing-footnote strong, .hs-group-head span, .hs-benefit,
  .pg-tablewrap td, .pg-tablewrap th { font-size: 12px !important; }
  .hs-card h3, .hs-card h5, [class*="hs-"] h5, .hs-group-head h3, .hs-limits h3, .footer-col h5 { font-size: 13px !important; }
  .hs-bub b, .hs-row span, .scroll-cue span { font-size: 12px !important; }
  .sec-label, .pg-kicker { letter-spacing: .14em !important; }

  /* Section rhythm: one screen of content per section instead of 100px of empty padding */
  .pg-sec, .pg-cta, .hs, .section-wrap { padding-top: 44px !important; padding-bottom: 44px !important; }
  .pg-hero { padding-top: 104px !important; padding-bottom: 36px !important; }
  .sec-header, .pg-sechead { margin-bottom: 22px !important; }

  /* Buttons: big, thumb-sized, full width where it is the main action (Salesforce) */
  .pg-btn, .btn, .btn-gold, .btn-outline { min-height: 48px; }
  .pg-actions, .hero-actions, .hs-actions, .pg-cta .pg-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .pg-actions .pg-btn, .hero-actions .btn, .pg-cta .pg-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }

  /* Tiles: tighter, smaller radius, small gaps (Apple's 12px) */
  .pg-tile, .hs-card { padding: 18px !important; border-radius: 18px !important; }

  /* Tile rails: groups of 4+ tiles become a sideways swipe with the next tile peeking, like Apple's and
     Salesforce's product rails, instead of a stack thousands of pixels tall. No touch-action override, so
     the page still scrolls up and down when the finger starts on a rail. */
  .pg-defs, .pg-qc, .pg-steps, .hs-tools, .pg-grid4, .ov-tiles {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-left: -20px; margin-right: -20px; padding: 4px 20px 14px; scroll-padding-left: 20px; scrollbar-width: none;
  }
  .pg-defs::-webkit-scrollbar, .pg-qc::-webkit-scrollbar, .pg-steps::-webkit-scrollbar, .hs-tools::-webkit-scrollbar { display: none; }
  .pg-defs > *, .pg-qc > *, .pg-steps > *, .hs-tools > *, .pg-grid4 > *, .ov-tiles > * {
    flex: 0 0 82% !important; max-width: 82% !important; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pg-defs > .pg-def { align-self: stretch; }

  /* Demos fit the screen instead of forcing a tall fixed box */
  .dm-body, .dm-chat { min-height: 0 !important; }
  .dm-out, .dm-result { min-height: 0 !important; }
  .dm-body { padding: 14px !important; }

  /* Comparison and plan tables scroll inside their own box rather than shrinking the text */
  .pg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -20px; margin-right: -20px; padding: 0 20px; }
  .pg-table { min-width: 560px; }

  /* Footer: compact, tappable links */
  footer a { display: inline-block; padding: 6px 0; }
}