.article {
  width: min(780px, calc(100% - 40px));
}

@media (max-width: 480px) {
  .nav {
    min-height: 66px;
    gap: 8px;
  }

  .logo {
    gap: 7px;
    font-size: 17px;
  }

  .logo img {
    width: 32px;
    height: 32px;
  }

  .nav > .button {
    padding: 10px;
    font-size: 0;
    white-space: nowrap;
  }

  .nav > .button::after {
    content: "Open editor";
    font-size: 12px;
  }

  .hero {
    padding: 52px 0 44px;
  }

  .hero h1,
  .article-hero h1 {
    font-size: clamp(38px, 12vw, 48px);
  }

  .lede {
    font-size: 17px;
  }

  .actions {
    display: grid;
  }

  .actions .button {
    width: 100%;
  }

  .proof {
    padding: 26px 22px;
  }

  .privacy-banner h2 {
    font-size: 32px;
  }

  .article {
    width: calc(100% - 24px);
    padding-top: 38px;
  }
}