/* Create23 mobile readability baseline — v54
   Applies only on phone-size viewports. Desktop/tablet visual styling stays unchanged.
   Decorative text inside website/app mockups is intentionally excluded where it functions as illustration. */

@media (max-width: 640px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:16px}

  /* Core reading copy */
  .lead,
  .section-intro,
  .copy p,
  .column p,
  .article-copy p,
  .article-copy li,
  .legal-content p,
  .legal-content li,
  .info-card p,
  .media-card p,
  .detail-card p,
  .resource-card p,
  .guide-group-heading p,
  .guide-item p,
  .plain-row p,
  .faq-item p,
  .check span,
  .capability p,
  .story-card-body p,
  .story-card p,
  .connection-copy p,
  .outcome-copy p,
  .outcome-tile p,
  .about-copy p,
  .final-card p,
  .brief-help,
  .ai-rule-caption,
  .ai-stat-note,
  .checker-group-head p,
  .checker-results-head p,
  .checker-result p,
  .checker-official-note p,
  .checker-disclaimer,
  .tool-intro p,
  .app-step-head p,
  .sidebar-note p{
    font-size:16px!important;
    line-height:1.65!important;
  }

  /* Small but meaningful supporting copy */
  .proof span,
  .mini-proof span,
  .chapter span,
  footer p,
  footer li,
  footer a,
  .footer-copy,
  .media-card strong,
  .service-check label span,
  .install-help,
  .checker-option small,
  .link-grid span,
  .step-nav small{
    font-size:14px!important;
    line-height:1.55!important;
  }

  /* Labels / metadata: intentionally smaller, but never tiny */
  .eyebrow,
  .kicker,
  .breadcrumbs,
  .breadcrumbs a,
  .cap,
  .cap-index,
  .tag,
  .guide-tag,
  .story-num,
  .step-num,
  .outcome-num,
  .outcome-kicker,
  .brief-label,
  .footer-meta,
  .legal-nav strong,
  .checker-group-head>span,
  .checker-status,
  .checker-result-badge,
  .step-kicker,
  .mobile-stepbar,
  .step-sidebar-head,
  .ai-rule-label{
    font-size:13px!important;
    line-height:1.4!important;
  }

  /* Primary labels, controls and actions */
  nav,
  .nav-links,
  .nav-links a,
  .nav-cta,
  .btn-dark,
  .btn-light,
  .text-link,
  .cap-link,
  .guide-all,
  .source-list a,
  .legal-nav a,
  .faq-item summary,
  button,
  .install-btn,
  .tool-intro-actions a,
  .action-primary,
  .action-secondary,
  .reset-link,
  .checker-links a,
  .checker-official-note a{
    font-size:15px!important;
  }

  /* Forms: 16px prevents browser zoom-on-focus and improves tap readability */
  input,
  textarea,
  select{
    font-size:16px!important;
    line-height:1.45!important;
  }
  label,
  legend,
  .field label,
  .checker-field legend{
    font-size:15px!important;
    line-height:1.45!important;
  }

  /* Card titles and standalone supporting labels */
  .proof strong,
  .mini-proof b,
  .chapter b,
  .service-check label b,
  .checker-option b,
  .checker-result h4,
  .link-grid b,
  .step-nav b{
    font-size:15px!important;
    line-height:1.35!important;
  }

  /* Tables remain compact, but readable */
  .guide th,
  table th{
    font-size:14px!important;
    line-height:1.45!important;
  }
  .guide td,
  table td{
    font-size:15px!important;
    line-height:1.55!important;
  }

  /* Legal pages are reading-heavy; keep the main text at a full reading size. */
  .legal-content p,
  .legal-content li,

  /* App / checker answer cards */
  .app-checker-form .checker-option b{font-size:16px!important}
  .app-checker-form .checker-option small{font-size:14px!important}
  .app-checker-form .checker-field legend{font-size:15px!important}
  .app-checker-form .checker-option>span{line-height:1.35}
  .checker-option b{font-size:16px!important}
  .checker-option small{font-size:14px!important}
  .checker-result h4{font-size:16px!important}
  .checker-links a{min-height:40px}

  /* Footer stays visually secondary while remaining readable. */
  footer h2{font-size:15px!important}
  footer li,footer p,footer a,.footer-copy{font-size:14px!important}

  /* Keep illustration-only microcopy at its designed scale. */
  .hero-stage .mock-nav,
  .hero-stage .phone-top,
  .hero-stage .app-card b,
  .hero-stage .visual-label,
  .story-media .metric span,
  .story-media .phone-top,
  .story-media .app-card b,
  .story-media .kicker,
  .service-visual.ui .metric span,
  .service-visual.ui .phone-top,
  .service-visual.ui .app-card b{
    font-size:inherit!important;
  }


  /* Repeated card systems used across service pages */
  .detail-card>span,
  .detail-card .cap,
  .content-card>span,
  .content-card span,
  .guide-group-kicker,
  .portfolio-label,
  .plain-row strong,
  .flow-step strong,
  .step-note{
    font-size:13px!important;
    line-height:1.4!important;
  }
  .detail-card p,
  .content-card p,
  .flow-step p,
  .process-step p,
  .notice-line{
    font-size:16px!important;
    line-height:1.65!important;
  }
  .about-point{font-size:14px!important;line-height:1.45!important}
  .addon-point b{font-size:15px!important}
  .addon-point span{font-size:14px!important;line-height:1.55!important}
  .check b{font-size:13px!important}
  .orbit-center span{font-size:14px!important;line-height:1.45!important}
  .orbit-node b{font-size:14px!important}
  .orbit-node span{font-size:13px!important}

  /* Vienna commercial photo-permit checker */
  .permit-group-head>span,
  .permit-status,
  .permit-result-badge{font-size:13px!important;line-height:1.4!important}
  .permit-group-head p,
  .permit-results-head p,
  .permit-result p,
  .permit-official-note p,
  .permit-disclaimer{font-size:16px!important;line-height:1.65!important}
  .permit-field legend{font-size:15px!important;line-height:1.45!important}
  .permit-option b{font-size:16px!important;line-height:1.3!important}
  .permit-option small{font-size:14px!important;line-height:1.5!important}
  .permit-form-actions span{font-size:14px!important;line-height:1.5!important}
  .permit-result h4,.permit-official-note strong{font-size:16px!important}
  .permit-links a,.permit-official-note a{font-size:15px!important;min-height:40px}

  /* AI statistics and coded rule explainers */
  .ai-stat-card span{font-size:16px!important;line-height:1.4!important}
  .ai-stat-card p{font-size:14px!important;line-height:1.55!important}
  .ai-rule-card>span,
  .ai-rule-visual-head>div>span,
  .ai-rule-label,
  .ai-change-steps b,
  .ai-workflow-steps b,
  .ai-check-grid>article>span,
  .ai-rule-spectrum em{
    font-size:13px!important;
    line-height:1.4!important;
  }
  .ai-rule-card p,
  .ai-example-list p,
  .ai-check-grid p{font-size:16px!important;line-height:1.65!important}
  .ai-example-list strong{font-size:15px!important;line-height:1.4!important}
  .ai-rule-two-col li{font-size:14px!important;line-height:1.5!important}
  .ai-rule-compare strong{font-size:15px!important}
  .ai-rule-compare p{font-size:14px!important;line-height:1.55!important}
  .ai-rule-compare small{font-size:13px!important;line-height:1.45!important}
  .ai-rule-spectrum strong{font-size:15px!important;line-height:1.35!important}
  .ai-rule-spectrum p{font-size:14px!important;line-height:1.55!important}
  .ai-change-steps strong{font-size:14px!important;line-height:1.35!important}
  .ai-change-steps span{font-size:13px!important;line-height:1.45!important}
  .ai-workflow-steps strong{font-size:15px!important}
  .ai-workflow-steps p{font-size:14px!important;line-height:1.55!important}
  .ai-rule-caption{font-size:14px!important;line-height:1.55!important}

  /* Standalone app step/navigation details */
  .mobile-stepbar span,
  .mobile-stepbar strong{font-size:13px!important}


  .media-card strong{font-size:15px!important;line-height:1.4!important}
  .addon-panel p{font-size:16px!important;line-height:1.65!important}
  .checker-form-actions span{font-size:14px!important;line-height:1.5!important}
  .checker-official-note strong{font-size:16px!important;line-height:1.4!important}


  /* Prevent the AI rule spectrum from pushing past 320px-wide screens. */
  .ai-rule-spectrum,
  .ai-rule-spectrum>div,
  .ai-rule-spectrum>div>*{min-width:0}
  .ai-rule-spectrum strong,
  .ai-rule-spectrum p,
  .ai-rule-spectrum em{overflow-wrap:anywhere;word-break:normal}
  .ai-rule-spectrum em{width:auto!important;max-width:100%!important;white-space:normal!important}
}