/* About page — mobile / tablet responsive fix.

   The desktop hero + mission sections use a two-column CSS grid whose second
   track carries a large min-width. On narrow screens that min-width forced the
   content wider than the viewport, so the hero copy overflowed off the right.

   Below 1180px we drop the grid entirely and stack the blocks with flexbox
   (single column, no min-width tracks can leak), cap every child at the
   viewport width, and centre the image blocks. Desktop (>= 1181px) is
   unchanged. */
@media (max-width: 1180px) {
  .pc-about-page .pc-about-hero-inner,
  .pc-about-page .pc-about-mission-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100% !important;
  }

  .pc-about-page .pc-about-hero-copy,
  .pc-about-page .pc-about-hero-visual,
  .pc-about-page .pc-about-mission-visual,
  .pc-about-page .pc-about-mission-grid > * {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Never let text/buttons exceed the column and cause a sideways scroll. */
  .pc-about-page .pc-about-hero h1,
  .pc-about-page .pc-about-hero .pc-hero-text,
  .pc-about-page .pc-about-hero .pc-eyebrow,
  .pc-about-page .pc-about-hero .pc-actions {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  .pc-about-page .pc-about-hero-visual img,
  .pc-about-page .pc-about-mission-visual img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Benefits carousel cards.
   They reuse the homepage `.pc-usecase-card`, which at <=980px flips to a
   two-column grid with a `min-height:280px` image. That leaked onto the vertical
   about cards and pushed the image out of its box (spilling above the card).
   Force the about cards back to a clean vertical card: image on top (contained),
   text below. */
@media (max-width: 1180px) {
  .pc-about-page .pc-about-benefit-card {
    display: block !important;
  }

  .pc-about-page .pc-about-benefit-card > picture {
    display: block;
    width: 100%;
  }

  .pc-about-page .pc-about-benefit-card img {
    display: block;
    width: 100% !important;
    height: clamp(200px, 46vw, 240px) !important;
    min-height: 0 !important;
    object-fit: cover;
  }
}

/* Safety net: never allow a horizontal scrollbar on the about page. */
.pc-about-page main {
  overflow-x: clip;
}