/* ZH Digital — phone-only reading refinement
   Scope invariant: every visual rule in this file is constrained to <=700px.
   Desktop/tablet presentation is intentionally untouched. */

@media (max-width: 700px) {
  /* ------------------------------------------------------------
     Mobile reading rhythm
     ------------------------------------------------------------ */
  main h1 {
    font-size: clamp(2.35rem, 11.6vw, 3.25rem) !important;
    line-height: 0.99 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance;
  }

  .section-title-row h2,
  .split-heading h2,
  .growth-copy h2,
  .trust-compact-copy h2,
  .service-detail-grid > div:first-child > h2,
  .about-grid > div:first-child > h2,
  .preview-process > div:first-child > h2,
  .page-cta h2,
  .final-cta h2,
  .work-gateway-note-grid h2,
  .zr-lessons-grid h2,
  .pc-lessons-grid h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.55rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
  }

  main p,
  main li,
  main small {
    line-height: 1.58;
  }

  .inner-lede,
  .big-copy,
  .section-title-row > p,
  .section-intro,
  .preview-public-copy > p,
  .zr-case-lede,
  .pc-case-lede {
    font-size: 1rem !important;
    line-height: 1.64 !important;
  }

  .section {
    padding-block: 3.55rem !important;
  }

  .inner-hero,
  .inner-hero.compact {
    padding-block: 3rem 3.35rem !important;
  }

  .page-cta,
  .final-cta {
    padding-block: 3.25rem !important;
  }

  .section-title-row,
  .section-title-row.compact-row,
  .split-heading {
    gap: 0.8rem !important;
    margin-bottom: 1.45rem !important;
  }

  .eyebrow {
    margin-bottom: 0.8rem !important;
  }

  .inner-hero-grid,
  .service-detail-grid,
  .service-detail-grid.reverse,
  .about-grid,
  .preview-process,
  .contact-grid,
  .work-gateway-note-grid,
  .zr-lessons-grid,
  .pc-lessons-grid {
    gap: 1.6rem !important;
  }

  /* Keep important action groups close to the copy they belong to. */
  .hero-actions,
  .preview-public-actions,
  .zr-case-actions,
  .pc-case-actions,
  .finder-result-actions,
  .prepared-actions {
    gap: 0.7rem !important;
  }

  /* ------------------------------------------------------------
     Shared horizontal browse shelf
     Parallel choices / sibling cards: swipe instead of long stacking.
     ------------------------------------------------------------ */
  .problem-grid,
  .home-gateway-grid,
  .trust-compact-grid,
  .detail-cards,
  .pricing-grid,
  .support-grid,
  .package-route-links,
  .work-case-grid,
  .feature-matrix,
  .preview-value-grid,
  .article-grid,
  .mini-ladder,
  .zr-feature-matrix,
  .pc-capability-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 88% !important;
    gap: 0.85rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.55rem;
  }

  .problem-grid::-webkit-scrollbar,
  .home-gateway-grid::-webkit-scrollbar,
  .trust-compact-grid::-webkit-scrollbar,
  .detail-cards::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar,
  .support-grid::-webkit-scrollbar,
  .package-route-links::-webkit-scrollbar,
  .work-case-grid::-webkit-scrollbar,
  .feature-matrix::-webkit-scrollbar,
  .preview-value-grid::-webkit-scrollbar,
  .article-grid::-webkit-scrollbar,
  .mini-ladder::-webkit-scrollbar,
  .zr-feature-matrix::-webkit-scrollbar,
  .pc-capability-grid::-webkit-scrollbar {
    display: none;
  }

  .problem-grid > *,
  .home-gateway-grid > *,
  .trust-compact-grid > *,
  .detail-cards > *,
  .pricing-grid > *,
  .support-grid > *,
  .package-route-links > *,
  .work-case-grid > *,
  .feature-matrix > *,
  .preview-value-grid > *,
  .article-grid > *,
  .mini-ladder > *,
  .zr-feature-matrix > *,
  .pc-capability-grid > * {
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
    scroll-snap-align: start;
  }

  /* Dense commercial cards deserve a little more reading width. */
  .pricing-grid,
  .support-grid,
  .work-case-grid {
    grid-auto-columns: 92% !important;
  }

  /* Remove desktop emphasis transforms that can clip a card inside a phone rail. */
  .pricing-grid > article,
  .support-grid > article,
  .work-case-grid > a {
    transform: none !important;
  }

  /* ------------------------------------------------------------
     Guided horizontal steppers
     Ordered sets keep their sequence while avoiding five-card vertical runs.
     ------------------------------------------------------------ */
  .process-row,
  .preview-process-list,
  .process-section .feature-matrix {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 84% !important;
    gap: 0.8rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.55rem;
  }

  .process-row::-webkit-scrollbar,
  .preview-process-list::-webkit-scrollbar,
  .process-section .feature-matrix::-webkit-scrollbar {
    display: none;
  }

  .process-row > *,
  .preview-process-list > *,
  .process-section .feature-matrix > * {
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ------------------------------------------------------------
     Page-specific mobile composition refinements
     ------------------------------------------------------------ */

  /* Homepage: keep related idea + shelf visually together. */
  .problems .shell,
  .home-gateway .shell,
  .trust .shell {
    gap: 1.35rem !important;
  }

  .problem-grid > a,
  .home-gateway-grid > a,
  .trust-compact-grid > article {
    padding: 1.45rem !important;
  }

  /* Services: preserve the statement first, then let sibling capabilities swipe. */
  .service-detail-grid > .detail-cards {
    margin-top: 0.25rem;
  }

  .detail-cards > article {
    padding: 1.45rem !important;
  }

  /* Packages: comparison is the task, so cards get maximum comfortable phone width. */
  .packages-page .pricing-grid,
  .social-pricing-grid {
    margin-top: 1.1rem !important;
  }

  .pricing-grid > article,
  .support-grid > article {
    padding: 1.5rem !important;
  }

  .package-route-links > a {
    padding: 1.2rem !important;
  }

  /* Work: case studies behave as a portfolio shelf rather than a long stack. */
  .work-case-grid > a {
    padding: 1.5rem !important;
  }

  /* About / Preview: keep numbered peer ideas visually connected. */
  .feature-matrix.principles > article,
  .preview-value-grid > article,
  .preview-process-list > article,
  .process-row > div,
  .process-section .feature-matrix > article {
    padding: 1.45rem !important;
  }

  /* Insights: browse articles horizontally; article detail pages remain normal reading pages. */
  .article-grid > article,
  .article-grid > a {
    min-height: 0 !important;
  }

  /* Long-form/article pages: improve phone reading measure without changing content. */
  .article-body,
  .insight-body,
  .legal-copy,
  .big-copy {
    max-width: 100% !important;
  }

  .article-body p,
  .insight-body p,
  .legal-copy p,
  .big-copy p {
    margin-bottom: 1rem;
  }

  /* Case studies: capability sets browse; narrative sections remain vertical. */
  .zr-feature-matrix > article,
  .pc-capability-grid > article {
    padding: 1.35rem !important;
  }

  /* CTA blocks should not consume a full phone viewport. */
  .page-cta .shell,
  .final-cta .shell {
    gap: 1.2rem !important;
  }

  /* Prevent desktop fixed heights from creating dead space inside mobile card groups. */
  .problem-grid > *,
  .home-gateway-grid > *,
  .trust-compact-grid > *,
  .detail-cards > *,
  .pricing-grid > *,
  .support-grid > *,
  .work-case-grid > *,
  .feature-matrix > *,
  .preview-value-grid > *,
  .preview-process-list > *,
  .article-grid > * {
    max-height: none !important;
  }
}