/* Phones. A phone gets the product, not the desktop around it: no window chrome or traffic lights, no painted
   frames, fixed heights on the tall replicas, swipe rows where desktop stacks four cards, and shorter copy. */
.dots { display: none; }

@media (max-width: 720px) {
  .dk { display: none; }
  section.block { padding-top: 76px; }
  .trust { padding-top: 40px; }
  footer.foot { margin-top: 76px; }
  .lede { font-size: 16px; }

  /* the product sits on the page as a card of its own */
  .frame:not(.closer) { margin-top: 26px !important; background: none; border-radius: 0; overflow: visible; }
  .frame:not(.closer) > .art-img, .frame:not(.closer) > canvas.pxl,
  .feature .art > .art-img, .feature .art > canvas.pxl { display: none; }
  .frame:not(.closer) .inset { padding: 0; }
  .window { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .window .chrome { display: none; }
  .window .screen { border-radius: 14px; box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.08), 0 18px 40px -26px rgba(10, 20, 40, 0.4); }

  /* hero: the Slack channel alone, no title bar or search */
  .hero .asks { display: none; }
  .hero { padding-bottom: 30px; }
  .hero .frame .inset { padding-top: 0; }
  .sk-slack { height: 470px; border-radius: 14px; background: #fff; }
  .sl-top { display: none; }
  .sl-shell { top: 0; left: 0; right: 0; border-radius: 14px; }

  /* teams: the heading and one line, then the app */
  .teams { margin-top: 28px; padding: 8px; }
  .tcopy { padding: 12px 10px 4px; }
  .tcopy h3 { font-size: 22px; }
  .tcopy p { font-size: 14.5px; }
  .tcopy ul { display: none; }
  .tmock { min-height: 0; height: 410px; }
  .tm { height: 100%; }
  .tm > .tdc, .tm > .tsl { min-height: 0; }
  /* every tab but Mumble's sizes to its content, so nothing is cut off; Mumble keeps a fixed panel with a fade */
  .tmock:not(:has(.tabmb)) { height: auto; }
  .tm:not(:has(.tabmb)), .tm > .tdc, .tm > .tsl { height: auto; }
  .tdc .dc-msgs, .tsl .sl-msgs { flex: none; overflow: visible; padding-top: 4px; }
  /* engineering: the issues, the status and the button; the drafted message stays on desktop */
  .di-x > small, .di-k, .di-msg { display: none; }
  .di-x { margin-top: 2px; }
  .tabmb .mb-tools, .tabmb .mb-h small { display: none; }
  .cu-l { display: none; }
  .cu { display: block; height: auto; padding: 4px; }
  .cu-d { border: 0; }
  .cu-d h3 { font-size: 18px; }
  .cu-v p, .cu-c b { font-size: 12.5px; }
  .cu-c small, .cu-v small { font-size: 11px; }
  .tm:has(.tabmb) { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }

  /* Mumble keeps its own scroll, so the answer glides inside a fixed panel instead of making the page long */
  #bq.mx { height: 540px; grid-template-rows: minmax(0, 1fr); }
  #bq .mb-body { min-height: 0; padding: 12px; }
  #bq .mb-hint { display: none; }
  #bq .mb-in { margin-bottom: 12px; }

  /* every channel */
  .journey { margin-top: 26px; padding: 8px; }
  .jwin { height: 400px; }
  .soon { padding: 4px 2px 2px; }
  .wall { margin-top: 48px; gap: 20px; }
  .tiles > div:nth-child(n+6):not(.more) { display: none; }

  /* four features become one swipe row */
  .features, .shift { display: flex; gap: 10px; margin: 26px -20px 0; padding: 0 20px 2px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .features::-webkit-scrollbar, .shift::-webkit-scrollbar { display: none; }
  .features > .feature { flex: 0 0 86%; scroll-snap-align: start; }
  .feature .copy { padding: 18px 18px 14px; }
  .feature .copy h3 { font-size: 24px; margin-top: 6px; }
  .feature .copy p { font-size: 14px; }
  .feature .art { padding: 0 10px 10px; }
  .feature .screen.rp { height: 380px; }
  .shift > .sstep { flex: 0 0 82%; scroll-snap-align: start; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width 0.3s var(--ease), background 0.3s var(--ease); }
  .dots i.on { width: 18px; background: var(--ink); }

  /* stories: the quote, then who said it */
  .proof { margin-top: 12px; font-size: 14px; gap: 6px 18px; }
  .quote-stage { min-height: 0; padding: 22px; }
  .quote-stage blockquote { margin-top: 20px; font-size: 21px; }
  .quote-stage .attrib { padding-top: 20px; }
  .picker { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pick { padding: 12px; gap: 10px; }
  .pick .pl { width: 36px; height: 36px; }
  .pick small, .pick-note { display: none; }

  /* procedures: straight to the procedure */
  .mx-sop .mx-top, .ps-head { display: none; }
  .ps-body { padding: 0; }
  .ps-editor { border: 0; border-radius: 14px; }

  /* the coop */
  .ask-ai { margin-top: 24px; }
  .aa-copy h3 { font-size: 22px; }

  /* checkout: a full-height sheet from the bottom, the plan as one compact row */
  .co { padding: 0; place-items: end stretch; }
  .co-sheet { width: 100%; height: calc(100dvh - 28px); grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 20px 20px 0 0; transform: translateY(40px); }
  .co-sum { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding: 18px 60px 16px 18px; }
  .co-sum::after, .co-brand, .co-sum p, .co-sum ul, .co-fine { display: none; }
  .co-k { margin: 0; grid-column: 1 / -1; }
  .co-sum h3 { margin: 4px 0 0; font-size: 26px; }
  .co-price { margin: 0; font-size: 26px; }
  .co-load { padding: 36px 18px; }
  .co-msg { padding: 32px 22px; }

  /* compare: three compact category rows, Moltd next to one company at a time, cards that swipe */
  .cmp-hero { padding-top: 40px; }
  .cmp-groups { grid-template-columns: 1fr; gap: 6px; margin-top: 24px; }
  .cmp-g { grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; }
  .cmp-g .stack span:nth-child(n+4) { display: none; }
  .cmp-g .stack span { width: 28px; height: 28px; border-radius: 8px; }
  .cmp-g .stack img { width: 17px; height: 17px; }
  .cmp-g b { font-size: 17px; }
  .cmp-g small { display: none; }
  .cmp-panel { padding: 22px 18px 18px; border-radius: 18px; }
  .cmp-key { display: none; }
  .mtx-wrap { display: none; }
  .h2h { display: block; }
  .vs-card { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; padding: 20px 18px; }
  .vs-card h3 { font-size: 21px; }
  .vs-card li { font-size: 14.5px; }
  .vs-title { font-size: 28px; }

  /* signed in: just the avatar in the header */
  #moltd-account-trigger > span { display: none; }

  /* closer */
  .frame.closer { min-height: 0; padding: 40px 14px; }
}