/* Mobile reading sizes stay readable; the layout adapts around the text. */
@media screen and (max-width: 900px) {
  body { font-size: 17px; }
  .hero-lead { font-size: 20px; line-height: 1.55; }
  .hero-description,
  .intro-heading > p:not(.eyebrow),
  .section-heading > p,
  .three-steps p,
  .module-description,
  .module-benefit p,
  .difference-copy > p:not(.eyebrow),
  .difference-list p,
  .building-copy > p:not(.eyebrow),
  .start-layout > div > p:last-child,
  .start-steps p,
  .faq-list details p,
  .conversation-copy > p:not(.eyebrow),
  .final-copy > .final-invitation,
  .banner-text p,
  #demo-description,
  .demo-stage p,
  .demo-message {
    font-size: 17px;
    line-height: 1.75;
  }
  .module-example p, .conversation-example p { font-size: 17px; line-height: 1.65; }
  .difference-list h3, .start-steps h3, .demo-stage h3 { font-size: 20px; line-height: 1.4; }
  .faq-list summary { font-size: 17px; line-height: 1.55; }
  .button, .text-button, .inline-link,
  .hero-actions .button, .hero-actions .text-button,
  .module-actions .button, .module-actions .text-button,
  .building-copy .text-button, .conversation-copy > .text-button,
  .final-copy .button, .demo-controls .button, .demo-controls .text-button,
  .banner-text .button, .three-steps a, .three-steps .inline-link {
    font-size: 16px;
    line-height: 1.5;
    min-height: 48px;
  }
  .header-cta { font-size: 14px; min-height: 44px; }
  .eyebrow, .final-copy .eyebrow, .banner-text .eyebrow,
  .module-kicker, .module-example .example-label,
  .conversation-example > .example-label, .story-category, .coming-label,
  .dialog-header .eyebrow, .demo-stage .demo-step-label {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .06em;
  }
  .hero-note, .photo-caption, .module-example small,
  .module-access, .section-footnote, .building-copy p.building-note,
  .conversation-example small, .conversation-example p.conversation-note,
  .final-copy > span, .site-footer p, .site-footer > div,
  .coming-next p, .status-badge, .difference-number, .difference-signature span,
  .building-chip, .demo-message strong {
    font-size: 14px;
    line-height: 1.65;
  }
  .module-benefit strong { font-size: 16px; line-height: 1.55; }
  .module-flow { font-size: 14px; line-height: 1.6; gap: 8px; }
  .module-tab { font-size: 14px; line-height: 1.4; min-width: 0; }
  .difference-link, .story-link { font-size: 16px; line-height: 1.5; min-height: 44px; }
  .photo-label { font-size: 12px; line-height: 1.5; max-width: calc(100% - 32px); left: 16px; }
  .floating-note strong, .note-help strong, .note-events strong { font-size: 16px; line-height: 1.4; }
  .floating-note small, .note-events small { font-size: 14px; line-height: 1.5; }
  .hero-note { align-items: flex-start; }
  .hero-note svg { margin-top: 4px; }
  .module-access svg { margin-top: 5px; }
}

@media screen and (max-width: 650px) {
  .header-cta { display: none; }
  .menu-toggle { width: 44px; height: 44px; }
  .mobile-menu a { font-size: 17px; min-height: 48px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .text-button { justify-content: center; }
  .hero-visual { display: grid; gap: 14px; padding-bottom: 0; }
  .photo-label { top: 16px; }
  .floating-note, .floating-note:hover {
    position: static;
    transform: none;
    max-width: none;
    padding: 16px;
    box-shadow: 0 4px 18px #18385710;
  }
  .floating-note > span:last-child { min-width: 0; flex: 1; }
  .floating-note strong br { display: none; }
  .photo-caption { position: static; margin: 0; }
  .hero { padding-bottom: 48px; }
  .module-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .module-tab { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 12px 10px; min-height: 64px; text-align: left; }
  .module-copy { padding: 25px 20px; }
  .module-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .module-actions .text-button { justify-content: center; }
  .coming-next p { max-width: none; flex-basis: 100%; }
  .coming-next .status-badge { margin-left: 0; }
  .difference-list article { gap: 10px; }
  .difference-list article > svg { display: none; }
  .difference-list article > div { min-width: 0; }
  .conversation-section { grid-template-columns: 1fr; }
  .conversation-example { padding: 18px; }
  .conversation-before, .conversation-after { padding: 18px; }
  .final-section { padding: 30px 22px; }
  .final-copy .eyebrow { max-width: none; }
  .site-footer { align-items: flex-start; }
  .site-footer > div { flex-wrap: wrap; gap: 12px 24px; }
  .site-footer > div a { display: inline-flex; align-items: center; min-height: 44px; }
  .demo-controls { flex-wrap: wrap; }
  .demo-controls .button { flex: 1 1 130px; }
  .dialog-header .icon-button { width: 44px; height: 44px; }
}