/* Mobile compaction (Nov 2026).
   Phones were scrolling 10 to 16 screens per page. These rules remove
   decorative visuals and repeated blocks below 761px so the copy and the
   page's primary action arrive sooner. Desktop is untouched. */
@media (max-width: 760px) {
  /* Homepage: demo screen strip under the hero, audience photos and the
     three "where sales stall" illustrations. The copy carries each block. */
  .cc-hero--home .home-hero-panorama,
  .cc-hero--home .home-hero-demo-note,
  .cc-audience-visual,
  .cc-pain-grid .cc-card-visual {
    display: none;
  }

  .cc-pain-grid .cc-card-body {
    padding-top: 20px;
  }
}

@media (max-width: 760px) {
  /* Capra Connect: the bento repeats ideas the interactive cards and the
     "How one deal moves" journey already show. Keep the interactive cards,
     drop the static illustrations and the two duplicate cards. */
  .cc-bento-grid > .cc-card:not(.cc-card-wide):not(.cc-card-full) .cc-card-visual,
  .cc-bento-grid > .cc-card:nth-child(2),
  .cc-bento-grid > .cc-card-full,
  .cc-ways .cc-rail,
  .cc-showcase .cc-showcase-frame {
    display: none;
  }

  .cc-bento-grid > .cc-card:not(.cc-card-wide):not(.cc-card-full) .cc-card-body {
    padding-top: 20px;
  }
}

@media (max-width: 760px) {
  /* Homepage callback: the three reassurance points repeat the intro
     paragraph. The form follows straight on. */
  .home-callback-section .cc-callback-points {
    display: none;
  }

  /* Capra Connect terms: each tier's headline figure (£0 setup, 0
     exclusivity, 0 minimums) says it. The supporting lists stay on desktop. */
  .cc-terms .cc-term-list-label,
  .cc-terms .cc-term .cc-checks {
    display: none;
  }

  .cc-terms-grid {
    gap: 12px;
  }
}

@media (max-width: 760px) {
  /* Capra Connect walkthrough: the demo agenda repeats the closing banner. */
  .cc-demo-panel .cc-agenda,
  .cc-demo-panel .cc-host {
    display: none;
  }
}

@media (max-width: 760px) {
  /* Section rhythm: 72px top and bottom stacked to 144px between every
     section on a phone. 48px keeps clear separation with far less scroll. */
  .cc .cc-section:not(.cc-section--tight) {
    padding-block: 48px;
  }

  .cc .cc-section--tight {
    padding-bottom: 48px;
  }

  .cc .cc-cta {
    padding-block: 0 48px;
  }

  .cc .cc-head {
    margin-bottom: 28px;
  }
}

@media (max-width: 760px) {
  /* Homepage hero: the bottom padding held space for the demo screen strip,
     which is hidden on phones. Let the hero size to its copy. */
  .home-hero-refresh .cc-hero--home {
    min-height: 0;
    padding-bottom: 56px;
  }
}

@media (max-width: 760px) {
  /* Sector detail pages (garage, manufacturing): asset cards held 230px
     minimum height with a 40px gap under the number. Let them size to
     their copy, and drop the decorative band photos on phones. */
  .sector-detail-asset-grid article {
    min-height: 0;
    padding: 20px;
  }

  .sector-detail-asset-grid span {
    margin-bottom: 8px;
  }

  .sector-detail-asset-grid h3 {
    font-size: 20px;
  }

  .sector-detail-media img,
  .sector-detail-project img {
    display: none;
  }

  .sector-detail-media-inner,
  .sector-detail-project-inner {
    gap: 24px;
  }

  .sector-detail-answer,
  .sector-detail-options,
  .sector-detail-process {
    padding-block: 40px;
  }

  .sector-detail-assets,
  .sector-detail-faq,
  .sector-detail-related {
    padding-bottom: 40px;
  }
}