/* ═══ ZIPPLEE ON A PHONE (Todd, 2026-10-01) ═══════════════════════════════
   People scan the QR code in a meeting and read the site on a phone; nobody
   has a laptop. It was 35 screens long, opened in dark, led with three rows
   of navigation and 146 pieces of text under 13px. Everything here is inside
   one breakpoint: above 640px the site is exactly as designed.
   What changes on a phone:
     · one header row — logo, Talk to us, Menu (mobile.js builds the sheet);
     · the hero says one thing, at a size you can read;
     · each section keeps its heading, its point and its link; long lists,
       demos and secondary panels stay on the desktop page and the module's
       own page;
     · the sixteen module showcases become a list of short cards;
     · nothing under 14px, nothing wider than the screen.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; overflow-x: hidden; }
  .wrap { width: calc(100% - 36px) !important; }

  /* ── header: one row ─────────────────────────────────────────────────── */
  .site-header .top-nav, .module-nav, .landing-tray, .preview-strip { display: none !important; }
  .header-row { display: flex !important; flex-wrap: nowrap !important; align-items: center; min-height: 60px !important;
                padding: 8px 0 !important; gap: 10px !important; }
  .header-row .brand img { width: 96px !important; }
  .m-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .m-brand img { width: 104px; height: auto; display: block; }
  :root[data-theme=dark] .m-brand img { filter: none; }
  .header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px !important; }
  .header-actions .theme-button { display: none !important; }
  .header-actions .talk-link { font-size: .9rem !important; white-space: nowrap; }
  .m-menu-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
                   border: 1px solid var(--strong-line); border-radius: 999px; background: var(--panel); color: var(--ink);
                   font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
  .m-menu-bars { display: grid; gap: 3px; } .m-menu-bars i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
  .m-menu { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background: var(--bg); color: var(--ink);
            padding: max(14px, env(safe-area-inset-top, 0px)) 22px max(28px, env(safe-area-inset-bottom, 0px)); }
  .m-menu[hidden] { display: none; }
  html.m-menu-open, html.m-menu-open body { overflow: hidden; }
  .m-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
                 font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .m-menu-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel);
                  color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .m-menu-main a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink);
                   font-size: 1.35rem; font-weight: 650; text-decoration: none; }
  .m-menu-main a[aria-current=page] { color: var(--accent-text, var(--ink)); text-decoration: underline; text-underline-offset: 6px; }
  .m-menu-label2 { margin: 24px 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .m-menu-products { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .m-menu-products a { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem; text-decoration: none; }
  .m-menu .theme-button { display: inline-flex !important; margin: 22px 0 0; }
  .m-menu-talk { display: block; margin-top: 22px; padding: 15px 18px; border-radius: 12px; background: #cdff03; color: #111;
                 font-weight: 700; text-align: center; text-decoration: none; }

  .m-topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
  .m-topbar .m-menu-button { color: var(--ink); }

  /* ── type: readable everywhere ───────────────────────────────────────── */
  p, li { font-size: max(1em, 15px); line-height: 1.55; }
  small, .small-label, figcaption, .eyebrow { font-size: max(.8rem, 13px) !important; }
  h1 { font-size: clamp(2rem, 9vw, 2.5rem) !important; line-height: 1.08 !important; }
  .section h2, .module-directory-row h2, .module-directory-intro h2 { font-size: clamp(1.7rem, 7.5vw, 2.1rem) !important; line-height: 1.12 !important; }
  .section { padding: 44px 0 !important; }

  /* ── hero: one message ───────────────────────────────────────────────── */
  .home-hero { padding: 26px 0 30px !important; }
  .hero-intro p { font-size: 1.05rem !important; line-height: 1.5 !important;
                  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-intro .eyebrow { margin-bottom: 10px; }
  .people-branch > span { display: none !important; }
  .people-map .people-branch strong { font-size: 1rem !important; }

  /* ── sections: heading, point, link ──────────────────────────────────── */
  .studio-map, .studio-flow-example { display: none !important; }
  .bundle-section .review-strip, .bundle-section .paper-note { display: none !important; }
  .tool-network-section .network-side, .tool-network-section .ask-details, .tool-network-section .ask-screens { display: none !important; }
  .agent-spotlight .agent-scenario:nth-of-type(n+2) { display: none !important; }
  .agent-spotlight .agent-example > p:not(.agent-steps) { display: none !important; }
  .workflow-library-section .workflow-library-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; margin-bottom: 20px !important; }
  .workflow-library-section .workflow-library-col li:nth-child(n+3) { display: none !important; }
  .hub-spotlight .hub-demo, .hub-spotlight .hub-details-clip, .hub-spotlight .hub-modal-inner { display: none !important; }
  .hub-spotlight .check-list li:nth-child(n+4), .phone-app-spotlight .check-list li:nth-child(n+4) { display: none !important; }
  .output-choice, .output-choice span { font-size: 14px !important; }
  .hero-bottom p { font-size: 14px !important; }
  .footer-bottom, .footer-bottom a, .footer-bottom span { font-size: 14px !important; }
  .footer-bottom a { display: inline-block; padding: 6px 0; }
  .live-reports-spotlight .report-preview-window, .live-reports-spotlight figure { display: none !important; }
  #module-concierge .showcase-copy p:not(:first-of-type), #module-concierge aside, #module-concierge .showcase-visual { display: none !important; }
  #module-concierge .showcase-copy p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

  /* ── the module showcases become a list ──────────────────────────────── */
  .module-constellation { padding-bottom: 12px; }
  .module-directory-intro { padding: 40px 0 14px !important; }
  .module-constellation .module-directory-row { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
  .module-constellation .module-directory-row-inner { display: block !important; padding: 18px 18px !important; margin: 0 auto 12px !important;
            border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-height: 0 !important; }
  .module-constellation .module-directory-row-inner > *:not(.showcase-copy):not(.showcase-wide-head) { display: none !important; }
  .module-constellation .showcase-wide-head > *:not(.showcase-copy) { display: none !important; }
  .module-constellation .showcase-copy { padding: 0 !important; max-width: none !important; }
  .module-constellation .showcase-copy h2 { font-size: 1.3rem !important; margin: 4px 0 6px !important; }
  .module-constellation .showcase-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            margin: 0 0 10px !important; color: var(--muted); }
  .module-constellation .showcase-copy p:not(:first-of-type), .module-constellation .showcase-copy ul,
  .module-constellation .showcase-copy aside { display: none !important; }
  /* the whole card is the link; a corner arrow replaces the "Explore …" line */
  .module-constellation .module-directory-row-inner { position: relative; padding-right: 46px !important; }
  .module-constellation .showcase-copy .text-link { position: static; display: block; width: 0; height: 0; overflow: hidden;
            font-size: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .module-constellation .showcase-copy .text-link::after { content: '\2197'; position: absolute; inset: 0; display: flex;
            align-items: flex-start; justify-content: flex-end; padding: 16px 18px; font-size: 1.15rem; color: var(--ink); border-radius: 16px; }
  .module-constellation .showcase-copy p { margin-bottom: 0 !important; }
  .module-constellation-stars { display: none !important; }

  /* ── nothing wider than the screen ───────────────────────────────────── */
  img, video, canvas, svg { max-width: 100%; }
  table { min-width: 0 !important; }

  /* ── page-specific small type: pricing, Zip, breadcrumbs ─────────────── */
  .price-card .text-link, .phone-pricing .status-badge, td span { font-size: 14px !important; }
  th { font-size: 13px !important; }
  .zipp-page-nav a { font-size: 14px !important; padding: 8px 13px !important; }
  .zipp-picture span, .zipp-try span { font-size: 13px !important; }
  .breadcrumb, .breadcrumb a, .breadcrumb span { font-size: 14px !important; }
}

/* built for phones only: never shown on a larger screen, even after a resize */
@media (min-width: 641px) { .m-brand, .m-menu-button, .m-menu { display: none !important; } }