/* ─────────────────────────────────────────────────────────────────────────
   type.css — mobile legibility. Loaded last, overrides only.

   The inherited CSS shrinks text on small screens: .hero > p drops to 14.5px
   on mobile while desktop gets 18-19px, .hero-note sits at 10.5px, and the
   mobile menu runs at 9-12px. Measured on the live build, 52% of text
   elements on a 375px screen were under 16px.

   That is the wrong way round. Mobile is where this site is actually read,
   by exhausted parents one-handed at 3am, and Susan mentioned her eyesight
   twice in the planning call. Type should hold up there, not shrink.

   Floors applied below 700px:
     reading text      16px minimum
     supporting text   14px minimum
     uppercase labels  12px minimum (tracked caps read smaller than they set)
     tap targets       16px, so buttons are never the smallest thing on screen

   Sizes at 700px and above are untouched.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 699px) {
  /* Hero */
  .hero > p {
    font-size: 17px;
  }

  .hero .eyebrow,
  .eyebrow {
    font-size: 13px;
  }

  .hero-link {
    font-size: 16px;
  }

  .hero-note,
  .home-hero > small,
  .inner-hero > small {
    font-size: 14px;
  }

  .hero .trust small,
  .trust small {
    font-size: 14px;
  }

  .hero-photo figcaption span {
    font-size: 12px;
  }

  /* Buttons: the primary action should never be the smallest text on screen */
  .btn,
  .text-button {
    font-size: 16px;
  }

  /* Body copy across the page */
  .services p,
  .how .steps p,
  .steps p,
  .price-grid p,
  .proof strong {
    font-size: 16px;
  }

  .contact p {
    font-size: 17px;
  }

  /* Package contents are reading text, not labels, so they hold the 16px floor */
  .price-grid .warm-list li,
  .warm-list li {
    font-size: 16px;
  }

  /* Pills and chips: short, tappable, and read as labels. 15px is fine. */
  .service-more a,
  .sound-familiar a,
  .sound-familiar span {
    font-size: 15px;
  }

  .package-label {
    font-size: 12px;
  }

  .proof-ribbon span,
  .testimonial-name span,
  .tv-credit span {
    font-size: 14px;
  }

  /* Footer: 11px legal text is unreadable on a phone */
  .full-footer p,
  .footer-links a,
  .full-footer span {
    font-size: 14px;
  }

  .global-cta small {
    font-size: 14px;
  }

  /* Nested <small> in the footer compounds down to 9px for the copyright
     line, which is smaller than anything else on the site. */
  .full-footer small {
    font-size: 13px;
  }

  /* A secondary button still landing at 13px. Higher specificity because the
     inherited rule targets it through three classes. */
  .button-row .btn.navy,
  .home-prices .button-row .navy,
  .home-prices .button-row .btn.navy {
    font-size: 16px;
  }

  /* Package cards: the unit line and the "Best for" note */
  .price-grid article > small {
    font-size: 14px;
  }

  .price-grid .best-for,
  .price-grid .best-for strong {
    font-size: 15px;
  }

  .hero-photo figcaption span {
    font-size: 13px;
  }

  /* About: the quote attribution */
  .about-quote blockquote cite {
    font-size: 13px;
  }

  /* FAQ: the 01/02/03 group numerals beside each question */
  .faq-list summary span {
    font-size: 13px;
  }
}

/* Mobile menu. Its own breakpoint in the inherited CSS, so matched here. */
@media (max-width: 999px) {
  .nav-kicker span {
    font-size: 12px;
  }

  .nav-links small,
  .nav-services-toggle small {
    font-size: 12px;
  }

  .nav-services-menu a {
    font-size: 16px;
  }

  .nav-book {
    font-size: 15px;
  }
}