/* Phone layout (under 760px): shorter copy, tighter spacing, compact cards. Desktop is not touched. */

.m-only { display: none; }

@media (max-width: 759px) {
  .d-only { display: none; }
  .m-only { display: inline; }

  /* reading: everything starts left-aligned and manual-hyphen; the justified rules further down then switch
     body paragraphs to justified (with auto hyphenation). Later rules win because they use !important too. */
  p, .lede, .pp-desc, .desc, .cap p, .warn p, .rules dd, .artefact p { text-align: left !important; hyphens: manual !important; -webkit-hyphens: manual !important; }

  .foot-copy, .shelf-note { text-align: center !important; }
  /* body paragraphs are justified on phones too; short lines and labels stay left */
  .section p:not(.demo-note):not(.shelf-note):not(.tagline):not(.audience):not(.result-count):not(.flow-note):not(.form-error):not(.promise):not(.open-now):not(.hours-note):not(.ab-lead):not(.more-row),
  .desc, .rules dd, .cap p, .artefact p, .warn p, .ab-card p, .ab-rules p {
    text-align: justify !important; text-align-last: left !important;
    hyphens: auto !important; -webkit-hyphens: auto !important; hyphenate-limit-chars: 7 3 3;
  }
  /* the remaining reading text (leads, hero lines, notes, lists, product copy) is justified as well */
  .ab-lead, .ab-cta p, .band-hero p, .hs-title, .tagline, .demo-note, .flow-note, .tz-note, .send-note, .pp-desc, .pp-tagline,
  .job-empty p, .pick-side p:not(.live-flag), .pp-sec p, .ab-card dd, .ab-rules dd, .side-points li, .m-only, .hero p, .band-dark p, .form > p, .wrap > p:not(.more-row):not(.live-flag):not(.foot-copy) {
    text-align: justify !important; text-align-last: left !important;
    hyphens: auto !important; -webkit-hyphens: auto !important; hyphenate-limit-chars: 7 3 3;
  }
  dd, .steps li > span { text-align: justify; text-align-last: left; hyphens: auto; }
  .foot-copy, .shelf-note, .live-flag, .more-row { text-align: left !important; }
  .foot-copy, .shelf-note { text-align: center !important; text-align-last: center !important; }

  /* rhythm */
  .section { padding: 34px 0; }
  .section-head { margin-bottom: 16px; }
  .section-head h2, .install-intro h2, .demo-copy h2, .contact-copy h2, .stack-head h2 { font-size: 1.65rem; }
  .section-head p, .stack-head p { display: none; }

  /* hero */
  .hero-tagline { display: none; }
  .lede { margin-top: .9rem; font-size: 1.02rem; line-height: 1.5; }
  .shelf-note { margin-top: 18px; font-size: .88rem; }

  /* product filters: one row of status chips, nothing else */
  .filters { padding-bottom: 12px; gap: 0; }
  .filters .fgroup:first-child, .filters .flabel, .search, .result-count { display: none; }
  /* segmented controls: device tabs and meeting-type pills share the row equally, edge to edge */
  .tabs { display: flex; width: 100%; flex-wrap: nowrap; }
  .tabs button { flex: 1 1 0; padding: .3rem .4rem; min-height: 42px; white-space: nowrap; }
  .how-row { display: flex; flex-wrap: nowrap; gap: 8px; }
  .how-row .pill { flex: 1 1 0; min-width: 0; }
  .how-row .pill span { display: flex; justify-content: center; text-align: center; min-height: 46px; padding: .3rem .3rem; border-width: 1.5px; font-size: .7rem; letter-spacing: .03em; line-height: 1.15; white-space: normal; }
  .filters .fgroup { width: 100%; }
  .filters .chips { display: flex; flex-wrap: nowrap; width: 100%; gap: 8px; }
  .filters .chip { flex: 1 1 0; justify-content: center; min-height: 42px; padding: .3rem .5rem; border-width: 1.5px; font-size: .9rem; white-space: nowrap; }
  #chips-status { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #chips-status::-webkit-scrollbar { display: none; }
  .chip[data-empty="true"]:not([aria-pressed="true"]) { display: none; }
  .chip { min-height: 40px; padding: .25rem .8rem; white-space: nowrap; }
  .group { margin-top: 22px; }
  .group-head { margin-bottom: 10px; }
  .group-head h3 { font-size: 1.35rem; }
  .group-head p { font-size: .92rem; font-weight: 500; color: var(--ink-2); }
  .grid { gap: 14px; }

  /* live product cards: slim header, short copy */
  .plate { aspect-ratio: auto; height: 92px; }
  .plate-icon, .plate-mono { width: 56px; }
  .status { left: 10px; top: 10px; font-size: .78rem; padding: .4rem .6rem; }
  .card-body { padding: 16px 16px 18px; }
  .card-body h3 { font-size: 1.3rem; }
  .audience { font-size: .9rem; font-weight: 500; color: var(--ink-2); margin-top: .15rem; }
  .tagline { margin: .7rem 0 .35rem; font-size: 1.02rem; }
  .desc { margin: 0 0 .9rem; font-size: .97rem; line-height: 1.5; }
  .stack { display: none; }
  .badges { margin-bottom: 12px; }
  .card-actions { gap: 6px 14px; }
  .card-actions .domain { display: none; }
  .card-actions .more-link { flex-basis: auto; min-height: 36px; margin-left: 4px; font-size: .92rem; }

  /* coming-soon cards: one slim row each (name and audience on the left, a small Ask button on the right) */
  .card.is-soon .plate, .card.is-soon .tagline, .card.is-soon .desc, .card.is-soon .stack, .card.is-soon .card-actions, .card.is-soon .badges { display: none; }
  .card.is-soon .card-body { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 16px; }
  .card.is-soon h3 { grid-column: 1; font-size: 1.12rem; line-height: 1.2; }
  .card.is-soon .audience { grid-column: 1; margin-top: 2px; }
  .card.is-soon .card-row { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .card.is-soon .card-row .btn { min-height: 40px; padding: 0 14px; }
  /* demo, install, services */
  .demo-card { padding: 18px; }
  .demo-note { font-size: .9rem; }
  .install-intro p { margin-top: .6rem; }
  .steps li { padding: 10px 12px; }
  .cap h4 { font-size: 1.1rem; }
  .cap .seen { display: none; }
  .cap p { font-size: .97rem; line-height: 1.5; }
  .cap { padding: 14px 0; }

  /* footer: bigger brand block, tagline and social kept, menu in two columns, phone and email only, small payment icons */
  .site-footer { padding-top: 30px; }
  .foot-grid { gap: 26px; }
  .foot-brand { gap: 16px; }
  .foot-about .brand-logo { width: clamp(96px, 31vw, 124px); }
  .foot-name { font-size: clamp(1.5rem, 7.2vw, 2rem); line-height: 1.1; white-space: nowrap; }
  .foot-blurb { max-width: none; font-size: .98rem; line-height: 1.5; }
  .foot-nav ul { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .foot-nav a { min-height: 38px; }
  .foot-contact [data-site-address], .foot-contact [data-site-postal], .foot-hours { display: none; }
  .pay-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: none; }
  .pay-tile { height: 40px; padding: 0 6px; }
  .pay-tile img { max-height: 20px; width: auto; }
  .pay-mpesa { grid-column: auto; height: 40px; font-size: 1.05rem; letter-spacing: .02em; }
  .pay-airtel { display: flex; height: 40px; font-size: clamp(.7rem, 3vw, .8rem); letter-spacing: 0; white-space: nowrap; }
  .pay-bank { font-size: .7rem; line-height: 1.1; gap: 5px; }
  .pay-bank svg { width: 16px; height: 16px; }
}
@media (max-width: 759px) {
  .steps { gap: 8px; }
  .steps li { grid-template-columns: 38px 1fr; gap: 12px; }
  .steps li::before { width: 38px; height: 38px; font-size: 1rem; }
}

@media (max-width: 759px) {
  /* lone buttons run edge to edge and sit slimmer, so they never hang at the left */
  .cta-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 1.2rem; }
  .cta-row .btn { width: 100%; min-height: 44px; padding: .5rem 1rem; border-width: 1.5px; font-size: .95rem; }
  /* every other lone button or button stack: same treatment (demo links, form buttons, booking steps, empty-jobs box) */
  .cta-row, .demo-apps, .form-actions, .stage-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .demo-apps .btn, .form-actions .btn, .stage-actions .btn, .more-days, .job-empty .btn { width: 100%; min-height: 44px; padding: .5rem 1rem; border-width: 1.5px; font-size: .95rem; }
  .job-empty { justify-items: stretch; }
  .stage-actions { margin-top: 18px; }
  .stage > .more-days { display: flex; }
  .hero { padding-bottom: 28px; }
}

@media (max-width: 359px) {
  .pay-tile { padding: 0 3px; }
}

/* Chat and WhatsApp are floating buttons: at the very end of the page they hover over the gap between the payment tiles and the copyright bar. They take no room of their own. */
@media (max-width: 759px) {
  .foot-copy { padding: 16px var(--gutter); min-height: 76px; }
  .wa-float { bottom: calc(67px + env(safe-area-inset-bottom)); }
  .chat-launcher { bottom: calc(70px + env(safe-area-inset-bottom)); }
}