@media (max-width: 560px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .shell {
    width: min(100% - 32px, 1180px);
  }

  .heroGrid {
    min-height: auto;
    gap: 32px;
    padding: 42px 0;
  }

  .hero h1,
  .articlePage h1,
  .contentHero h1 {
    font-size: clamp(2.15rem, 10vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .section h2,
  .closing h2,
  .articlePage .articleContent h2,
  .contentTopic h2 {
    font-size: clamp(1.8rem, 8vw, 2.15rem);
    line-height: 1.13;
  }

  .lead,
  .articlePage .articleLead,
  .bodyText,
  .articlePage .articleContent {
    font-size: 1rem;
    line-height: 1.7;
  }

  .section {
    padding: 58px 0;
  }

  .heroVisual {
    height: 300px;
  }

  .sectionImage {
    height: 270px;
  }

  .proofbar .shell {
    gap: 18px;
    padding: 0 2px;
    white-space: nowrap;
  }

  .button,
  .outlineButton {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .actions,
  .closingActions {
    width: 100%;
  }

  .cardGrid article {
    padding: 24px;
  }

  .footerGrid {
    gap: 30px;
  }
}