/* Phone rules for the partner T&C pages.
 *
 * These pages are standalone HTML with their own inline styles — they never
 * load site.css, so none of the shared phone rules reach them.
 */

/* ── Nav ──
 * The header puts a nowrap link row between two flex-shrink:0 rails, giving it
 * ~860px of min-content. A phone can't shrink that, so the browser widens the
 * layout viewport to fit: text renders small, the header is cut off, and the
 * whole document pans sideways.
 *
 * These rules are mobile-first on purpose. A max-width query can't fix it —
 * the blown-out layout viewport is the width the query itself is measured
 * against, so the header stays wide and the query never matches. Hiding the
 * link row by default keeps min-content small, and the desktop row returns on
 * a min-width query. !important is needed because each page re-declares these
 * classes in a <style> block inside <body>, after this file.
 *
 * The footer carries the same destinations, and the wordmark still links home.
 */
.header-nav-links { display: none !important; }
.site-nav-inner { padding: 12px 20px; gap: 12px; flex-wrap: wrap; }
.header-left, .header-right { min-width: 0; flex-shrink: 1; }
.header-wordmark { height: 26px; }
.header-right a[href$="contact.html"] { padding: 8px 12px; font-size: 13px; }

@media (min-width: 861px) {
  .header-nav-links { display: flex !important; }
  .site-nav-inner { padding: 13px 32px; gap: 24px; flex-wrap: nowrap; }
  .header-wordmark { height: 32px; }
  .header-right a[href$="contact.html"] { padding: 10px 18px; font-size: 14px; }
}

/* ── Body ── */
@media (max-width: 600px) {
  /* Full-bleed photos cancel the 32px body padding with a negative margin.
     Phones drop that padding to 20px, so the bleed has to match or the photo
     hangs 12px off each edge and widens the page. */
  .body-wrap [style*="margin: 0 -32px"] {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }

  /* Rate tables have no narrower form. Let them scroll inside their own box
     rather than stretching the document. */
  .pricing-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}