/* Mobile refinements supplied in the September 2026 review. */
@media (max-width: 767.98px) {
  /* Keep the recurring content sections on a consistent mobile rhythm. */
  .brand-section,
  .build-section,
  .opportunities-section,
  .platform-section,
  .comparison-section,
  .inner-page .rewards-section,
  .inner-page .lps-sec {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .platform-section .container > p,
  .inner-page .platform-section .tb-text {
    margin-top: 16px;
    margin-bottom: 28px;
  }

  /* Give dark problem panels usable width and put their numbers above the copy. */
  .problem-section,
  .home-page .problem-section {
    width: calc(100% - 32px);
    margin-right: 16px;
    margin-left: 16px;
    padding: 40px 20px 48px;
  }

  .problem-section .container {
    padding-right: 0;
    padding-left: 0;
  }

  .problem-section .container > p {
    margin-bottom: 32px;
  }

  .problem-section .problem-box,
  .home-page .problem-section .problem-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .problem-section .problem-box .number,
  .home-page .problem-section .problem-box .number,
  .communitybanks-page .problem-section .problem-box .number,
  .competition-platform-page .problem-section .problem-box .number,
  .contact-page .problem-section .problem-box .number {
    flex: none;
    width: auto;
    margin-bottom: 4px;
    text-align: left;
  }

  .problem-section .problem-box .content {
    width: 100%;
  }

  .problem-section .problem-box h3 {
    width: 100%;
    max-width: none;
    margin-top: 8px;
  }

  /* Preserve both logos in the home-page partner testimonial. */
  .home-page .review-section .review-row .col-lg-6:first-of-type > img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-bottom: 28px;
    object-fit: contain;
    object-position: left center;
  }

  /* Rollout components should use the full content width without clipping titles. */
  #customer-steps .container,
  #customer-steps .customer-inner {
    width: 100%;
    max-width: none;
  }

  #customer-steps .customer-inner {
    padding-right: 0;
    padding-left: 0;
  }

  #customer-steps .customer-inner > h2,
  #customer-steps .customer-inner > p,
  #customer-steps .customer-inner .reward-point-row,
  #customer-steps .customer-inner .right-content {
    width: 100%;
    max-width: none;
  }

  #customer-steps .customer-inner .reward-point-row {
    margin-top: 28px;
  }

  #customer-steps .reward-point {
    align-items: flex-start;
    width: 100%;
  }

  #customer-steps .reward-point .content-inner {
    flex: 1 1 auto;
    min-width: 0;
  }

  #customer-steps .reward-point h3,
  #customer-steps .reward-step-toggle {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    text-align: left;
  }

  /* Restore a visible card surface and keep slider content clear of both arrows. */
  .about-feature-sec.blt-slider {
    width: calc(100% - 32px);
    margin: 32px auto;
  }

  .about-feature-sec.blt-slider .slick-list {
    border-radius: 12px;
  }

  .about-feature-sec.blt-slider .af-box {
    min-height: 300px;
    padding: 40px 52px;
    background: #f1ebea;
    border: 1px solid rgb(26 31 46 / 10%);
    border-radius: 12px;
  }

  .about-feature-sec.blt-slider .slick-prev {
    left: 8px;
  }

  .about-feature-sec.blt-slider .slick-next {
    right: 8px;
  }

  /* Bring Why Spendstream panels closer to the preceding section and widen copy. */
  .inner-page .lps-sec.wwl {
    padding-top: 32px;
  }

  .lps-sec.wwl .problem-section {
    width: calc(100% - 32px);
    margin-right: 16px;
    margin-left: 16px;
    padding: 32px 20px 40px;
  }

  .lps-sec.wwl .problem-section .container {
    width: 100%;
    max-width: none;
  }

  /* Make the mobile services comparison header readable and visibly expandable. */
  .services-page .services-table-mobile .selected-plan {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    padding: 16px;
  }

  .services-page .services-table-mobile .selected-right {
    min-width: 0;
    max-width: none;
    gap: 10px;
  }

  .services-page .services-table-mobile .selected-right img {
    width: 126px;
    max-width: calc(100% - 30px);
    height: auto;
  }

  .services-page .services-table-mobile .selected-right svg {
    display: block;
    flex: 0 0 20px;
  }

  /* Raffle House headings should start at the same inset as other mobile sections. */
  .rafflehouse-page .platform-section {
    padding-top: 32px;
  }

  .rafflehouse-page .platform-section .top-badge1 {
    margin-top: 0;
  }

  /* The API audience badges remain two-up, including the final item. */
  .api-integration-page .api-built-for-teams-section .bft-badge {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .api-integration-page .api-built-for-teams-section .bft-badge-box,
  .api-integration-page .api-built-for-teams-section .bft-badge-box:last-child {
    width: auto;
    min-width: 0;
  }

  /* Mobile API callout copy follows the site's normal left alignment. */
  .api-integration-page .tuh-sec {
    padding-right: 24px;
    padding-left: 24px;
  }

  .api-integration-page .tuh-sec .nl-api-content,
  .api-integration-page .tuh-sec .nl-api-content h2,
  .api-integration-page .tuh-sec .nl-api-content p {
    text-align: left;
  }

  .api-integration-page .tuh-sec .nl-api-content .dark-badges {
    text-align: left;
  }

  /* Restore the existing white-label audience illustration on small screens. */
  .whitelabel-page .cr-sec .cr-lines {
    display: none;
  }

  .whitelabel-page .cr-sec .title-box {
    margin-bottom: 24px;
  }

  .whitelabel-page .cr-sec .cr-mobi-img {
    display: block;
    width: 100%;
    margin: 0 0 28px;
  }

  .whitelabel-page .cr-sec .cr-mobi-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
  }
}

@media (max-width: 400px) {
  .about-feature-sec.blt-slider .af-box {
    padding-right: 46px;
    padding-left: 46px;
  }
}