/* Phone fit layer: loaded last on every page.
   Gives content the full phone width (16px gutters, one level of card padding)
   and a readable type floor. Illustrations / mockups keep their own scale. */
@media (max-width: 600px) {
  /* ---------- Page gutters ---------- */
  html body:not(#_mf) .container,
  html body:not(#_mf) main.container,
  html body:not(#_mf) .ck-wrap,
  html body:not(#_mf) .ck-eco-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
  html body:not(#_mf) .container .container { padding-left: 0 !important; padding-right: 0 !important; }
  html body:not(#_mf) section.ck-ecosystem-discovery,
  html body:not(#_mf) .ck-layout { padding-left: 0 !important; padding-right: 0 !important; }
  /* <main> is the gutter only when it doesn't already wrap a .container */
  html body:not(#_mf) main:not(.container):not(:has(.container)) { padding-left: 16px !important; padding-right: 16px !important; }
  html body:not(#_mf) main:not(.container):has(.container) { padding-left: 0 !important; padding-right: 0 !important; }

  /* ---------- Cards: one modest level of inner padding ---------- */
  html body:not(#_mf) :is(
    .card-content, .callout-box,
    .wantace-founder-card, .wantace-diff-card, .wantace-client-card, .wantace-speed-card,
    .wantace-figure-card, .wantace-availability-banner, .apple-git-chart-card,
    .process-cta, .expertise-cta, .ck-eco-card, .footer-card,
    .blog-card-body, .author-profile-card, .apc-body,
    .service-detail-content, .pricing-card-inner, .commerce-package, .commerce-package-inclusions,
    .pricing-card-custom, .feature-card-custom,
    .contact-info-panel, .contact-form-card,
    .ck-card, .ck-aside, .article-nav-btn,
    .pricing-value-band, .hosting-card, .fc, .faq-a, .cta-block,
    .case-study-block, .problem-card, .feature-card, .article-cta-box
  ) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body:not(#_mf) :is(.service-detail-content, .commerce-package-inclusions) :is(ul, ol) { padding-left: 18px !important; }
  html body:not(#_mf) .ck-card .ck-card,
  html body:not(#_mf) .card-content .card-content { padding-left: 0 !important; padding-right: 0 !important; }


  /* Inline-styled cards (about, city pages): same single level of padding */
  html body:not(#_mf) div[style*="border-radius"]:is([style*="padding: 24px"], [style*="padding: 28px"],
    [style*="padding: 32px"], [style*="padding: 36px"], [style*="padding: 40px"], [style*="padding: 48px"]) {
    padding-left: 18px !important; padding-right: 18px !important;
  }

  /* Home process timeline: keep the number rail, drop the stacked offsets */
  html body:not(#_mf) .process-timeline { padding-left: 0 !important; padding-right: 0 !important; }
  html body:not(#_mf) .process-timeline .process-step { margin-left: 0 !important; }
  html body:not(#_mf) .process-timeline .step-content { margin-left: 10px !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Wide article tables scroll sideways instead of stretching the page */
  html body:not(#_mf) :is(article, main, .article-container) table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* Long inline code wraps; code blocks scroll inside themselves */
  html body:not(#_mf) :is(p, li) code { overflow-wrap: anywhere; word-break: break-word; }
  html body:not(#_mf) pre { max-width: 100%; overflow-x: auto; }

  /* ---------- Type floor ----------
     Generated from a 375px scan of all pages: only selectors whose text rendered
     below the floor, minus any that also match larger text. Mockup/illustration
     text is left at its designed size. */
  html body:not(#_mf) :is(
    p.ck-eco-desc, .ck-aside p, .ck-aside small, .ck-footer p, .auth-logo p, div.auth-help-box,
    .blog-card-body p, p.apc-bio, .pricing-card-custom p, .faq-card-answer p, .card-left p,
    p.founder-mobile-p, .wantace-diff-card p, div.wantace-stat-label, .wantace-client-card p,
    div.pricing-guarantee-note, .commerce-package-inclusions span, .hosting-care-intro p,
    .portfolio-empty p, div.stat-desc, p.comparison-cta-text, .fc p, div.proof-block,
    .problem-card p, .workflow-step p, div.price-desc
  ) { font-size: 15px !important; line-height: 1.6; }
  html body:not(#_mf) :is(
    div.copyright-text, .legal-links a, label.ck-region, .auth-help-box strong, span.db-badge,
    span.metric-subtitle, div.service-chip, .form-group-premium label, .trust-badges-bar span,
    .blog-author-info small, a.apc-cta-btn, p.apc-role, span.apc-role-badge, span.apc-tag,
    .apc-location span, div.apple-logo-item, .card-left li, .cta-dark span, div.wantace-stat-badge,
    .wantace-speed-card p, .footer-directory-toggle span, .pricing-feature-list li, .pricing-work-head b,
    .pricing-work-steps li, .pricing-timeline-footer span, span.graphic-micro-badge,
    .commerce-package-price span, .commerce-package-inclusions div, div.tier-header-name, td.cell-tier,
    .hosting-table strong, .cell-tier strong, span.spec-label, span.spec-value, .hosting-care-list li,
    .commerce-package-inclusions li, .hosting-card li,
    span.tech-tag, span.apple-badge, div.sl, div.stat-label, span.result-chip, p.showcase-subtitle
  ) { font-size: 14px !important; }
  html body:not(#_mf) :is(
    div.footer-taxonomy-bar, .footer-taxonomy-bar span, .footer-taxonomy-bar a
  ) { font-size: 13px !important; }
  html body:not(#_mf) :is(
    div.ck-eco-badge, span.social-label, div.ck-eyebrow, div.bento-card-tag, .footer-taxonomy-bar div,
    span.apc-stat-label, div.col-header, p.apple-trust-title, .pricing-work-head span, div.most-popular-pill,
    span.pricing-value-eyebrow, span.commerce-package-label, div.hosting-card-badge,
    .project-editorial-index span, div.features-label, div.stat-tag
  ) { font-size: 12px !important; }
}