/* Mobile reading and touch refinements. Desktop styles stay in their original files. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  .hero-copy, .feature-copy, .feature-visual, .contact-layout > div, .wingman-home > div { min-width: 0; }

  /* Keep the header compact while giving each action a full touch target. */
  .nav-wrap { gap: 8px; }
  .brand { min-height: 44px; }
  .nav-wrap .brand img { width: clamp(110px, 31vw, 125px); }
  .nav-actions { gap: 4px; }
  .menu-toggle { width: 44px; height: 44px; flex: none; }
  .nav-wrap .nav-cta { min-height: 44px; font-size: 12px; padding: 10px 12px; }
  .nav-wrap nav a { min-height: 48px; display: flex; align-items: center; font-size: 16px; padding-block: 10px; }
  .nav-wrap nav .mobile-only { display: flex !important; }

  .btn { min-height: 48px; font-size: 14px; line-height: 1.4; padding: 12px 18px; white-space: normal; text-align: center; }
  .text-link { min-height: 44px; font-size: 14px; line-height: 1.5; }
  .hero-actions { gap: 12px 20px; }
  .hero h1 { font-size: clamp(32px, 9.2vw, 38px); line-height: 1.15; letter-spacing: -.05em; text-wrap: balance; }
  h2, .feature-copy h2, .faq-section h2, .contact-layout h2 { font-size: clamp(28px, 8.2vw, 32px); line-height: 1.2; text-wrap: balance; }
  .hero .eyebrow, .eyebrow, .section-head .eyebrow { font-size: 11px; line-height: 1.6; letter-spacing: .08em; }
  .hero-description { font-size: 17px; line-height: 1.6; }
  .tag, .feature-copy .tag { font-size: 12px; line-height: 1.5; }
  .section-head > p:not(.eyebrow), .feature-copy > p, .wingman-home > div > p,
  .contact-layout > div > p, .mini-card p { font-size: 15px; line-height: 1.75; }
  .feature-list, .contact-panel .feature-list { font-size: 14px; line-height: 1.65; gap: 12px; }
  .feature-list li { align-items: flex-start; }
  .feature-list .icon { width: 16px; height: 16px; margin-top: 3px; }
  .mini-card h3 { font-size: 22px; line-height: 1.3; }
  .sample-note, .actual-feature-preview .sample-note { font-size: 12px !important; line-height: 1.6; }

  /* Dense app captures retain enough width to inspect with a horizontal swipe. */
  .hero > .visual-preview .product-frame, .product-frame, .actual-feature-preview { padding: 12px; }
  .real-app-showcase { padding: 12px; margin-inline: 0; }
  .app-preview-toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .app-preview-tabs { width: 100%; flex: 1 1 100%; gap: 3px; }
  .app-preview-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 5px; font-size: 12px; line-height: 1.35; }
  .app-preview-theme { font-size: 11px; line-height: 1.5; }
  .app-capture-frame { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #a9b9d4 #edf3ff; }
  .app-capture-frame .app-capture { width: 760px; min-width: 760px; max-width: none; height: auto; }
  .actual-app-screen figcaption { display: block; }
  .actual-app-screen figcaption, .actual-app-screen figcaption a { font-size: 12px; line-height: 1.6; }
  .frame-caption { font-size: 11px; line-height: 1.5; letter-spacing: .04em; margin-bottom: 12px; }
  .actual-feature-preview .capture-label { display: block; }
  .actual-feature-preview .capture-label a, .visual-preview .capture-open { min-height: 44px; font-size: 12px; line-height: 1.5; white-space: normal; }
  .actual-app-screen figcaption::after, .actual-feature-preview .sample-note::after,
  .visual-preview > .sample-note::after { content: 'Swipe the preview to explore.'; display: block; margin-top: 5px; color: #53647c; }

  .customer-strip > p { font-size: 12px; line-height: 1.6; }
  .integration-orbit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .integration-orbit a { min-height: 96px; gap: 10px; padding: 10px 4px; }
  .integration-orbit span { font-size: 12px; line-height: 1.4; max-width: 100%; overflow-wrap: anywhere; }
  .integration-orbit img { width: 28px; height: 28px; }
  .integration-orbit img[src="/assets/integrations/iclosed.png"],
  .integration-card img[src="/assets/integrations/iclosed.png"] { filter: brightness(0); }
  .integration-directory { grid-template-columns: 1fr; gap: 16px; }
  .integration-card { padding: 22px; }
  .integration-card-top { flex-direction: row; align-items: center; }
  .integration-card-top .tag { font-size: 11px; line-height: 1.4; }
  .integration-card h3 { font-size: 22px; margin-top: 20px; }
  .integration-card p { font-size: 15px; line-height: 1.7; }
  .integration-filters button { min-height: 44px; font-size: 13px; padding: 10px 13px; }
  #integration-count { font-size: 12px; }
  .flow-diagram { gap: 14px; padding: 22px 14px; }
  .flow-diagram span { font-size: 13px; line-height: 1.5; padding: 10px; }

  .quote-person strong { font-size: 14px; }
  .quote-person small, .testimonial-section > p { font-size: 12px; line-height: 1.6; }
  .faq-list summary { min-height: 56px; font-size: 15px; line-height: 1.55; gap: 16px; }
  .faq-list details > p { font-size: 15px; line-height: 1.75; }
  .final-cta { padding: 36px 20px; }
  .final-cta h2 { font-size: clamp(27px, 7.8vw, 31px); line-height: 1.2; text-wrap: balance; }
  .final-cta > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; }
  .final-cta .hero-actions { gap: 12px 20px; }
  .final-cta .text-link { font-size: 14px; }

  .contact-panel { padding: 24px; }
  .contact-panel .eyebrow { font-size: 11px; }
  .contact-panel p { font-size: 15px; line-height: 1.75; }
  .contact-panel .btn { max-width: 100%; }
  .steps-list strong { font-size: 15px; line-height: 1.6; }
  .steps-list p { font-size: 14px; line-height: 1.75; }
  .steps-list li::before { font-size: 12px; }
  .legal-copy p, .legal-copy li { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
  .legal-copy h2 { font-size: 25px; line-height: 1.3; }
  .legal-top { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

  .footer-top { gap: 28px 22px; }
  .footer-top > div:first-child { display: block; }
  .footer-top > div:first-child > p { font-size: 12px; line-height: 1.65; margin-top: 14px; }
  .footer-top > div:not(:first-child) { gap: 0; }
  .footer-label { font-size: 13px; line-height: 1.5; margin-bottom: 9px; }
  .footer-top > div > a:not(.brand) { display: flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.45; padding-block: 7px; }
  .footer-bottom { font-size: 11px; line-height: 1.6; }
  .footer-bottom > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }

  /* Shared campaign pages use the same readable sizing as the main website. */
  .landing-page .landing-header { gap: 10px; }
  .landing-page .landing-header .brand img { width: clamp(110px, 31vw, 125px); }
  .landing-page .landing-header-cta { min-height: 44px; padding: 10px 13px; font-size: 12px; }
  .landing-page .landing-hero h1 { font-size: clamp(32px, 9.2vw, 38px); line-height: 1.15; text-wrap: balance; }
  .landing-page .landing-hero .eyebrow, .landing-page .landing-closing .eyebrow { font-size: 11px; line-height: 1.6; }
  .landing-page .landing-intro { font-size: 16px; line-height: 1.75; }
  .landing-page .landing-hero-actions { gap: 12px 20px; }
  .landing-page .landing-hero-actions .text-link { font-size: 14px; min-height: 44px; }
  .landing-page .landing-demo-note { font-size: 12px; line-height: 1.6; }
  .landing-page .landing-capture, .landing-page .landing-product-sections .landing-capture { padding: 12px; }
  .landing-page .landing-capture-label, .landing-page .landing-product-sections .landing-capture-label { font-size: 11px; line-height: 1.5; flex-wrap: wrap; gap: 7px; letter-spacing: .02em; }
  .landing-page .landing-light-label, .landing-page .landing-product-sections .landing-light-label { font-size: 10px; line-height: 1.5; }
  .landing-page .landing-capture .app-capture-frame { overflow-x: auto; }
  .landing-page .landing-capture figcaption { font-size: 12px; line-height: 1.6; }
  .landing-page .landing-capture figcaption::after { content: 'Swipe the preview to explore.'; display: block; margin-top: 5px; color: #53647c; }
  .landing-page .landing-community > p { font-size: 12px; line-height: 1.6; }
  .landing-page .landing-section-heading h2, .landing-page .landing-product-sections .feature-copy h2,
  .landing-page .landing-faq h2, .landing-page .landing-closing h2 { font-size: clamp(28px, 8.2vw, 32px); line-height: 1.2; text-wrap: balance; }
  .landing-page .landing-section-heading > p:not(.eyebrow), .landing-page .landing-product-sections .feature-copy > p,
  .landing-page .landing-problems article p, .landing-page .landing-steps article p,
  .landing-page .landing-faq > div > p:not(.eyebrow), .landing-page .landing-closing > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; }
  .landing-page .landing-product-sections .feature-list { font-size: 14px; line-height: 1.65; }
  .landing-page .landing-product-sections .feature-copy .tag { font-size: 12px; }
  .landing-page .landing-step-number { font-size: 12px; }
  .landing-page .landing-problems h3, .landing-page .landing-steps h3 { font-size: 22px; line-height: 1.3; }
  .landing-page .landing-proof-person strong { font-size: 14px; }
  .landing-page .landing-proof-person span, .landing-page .landing-proof > p { font-size: 12px; line-height: 1.6; }
  .landing-page .landing-faq summary { min-height: 56px; font-size: 15px; line-height: 1.55; gap: 16px; }
  .landing-page .landing-faq details > p { font-size: 15px; line-height: 1.75; }
  .landing-page .landing-closing-note { font-size: 12px; line-height: 1.6; }
}

@media (max-width: 360px) {
  .integration-orbit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}