/* Ajustes de contenção responsiva: preservam o layout e evitam cortes laterais. */
@media (max-width: 980px) {
  .hero-grid > *,
  .audience-panel > *,
  .solution-grid > *,
  .api-grid > *,
  .security-grid > *,
  .faq-layout > *,
  .footer-grid > * {
    min-width: 0;
  }

  .story-content {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .audience-panel,
  .api-grid,
  .security-grid,
  .faq-layout,
  .api-terminal {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 24px);
    max-width: var(--max);
  }

  .nav-wrap {
    width: calc(100% - 24px);
  }

  .mobile-menu.open {
    left: 12px;
    right: 12px;
  }

  .hero-product {
    width: 100%;
    max-width: 100%;
    margin: -20px 0;
    transform: scale(.86);
    transform-origin: center center;
  }

  .audience-panel {
    width: 100%;
    gap: 32px;
    overflow: hidden;
  }

  .audience-copy,
  .audience-visual {
    width: 100%;
    min-width: 0;
  }

  .code-card {
    width: calc(100% - 30px);
    max-width: 100%;
  }

  .solution-card,
  .solution-card.large,
  .solution-card.wide {
    width: 100%;
    max-width: 100%;
  }

  .api-copy,
  .api-terminal {
    width: 100%;
    min-width: 0;
  }

  .price-lock {
    flex-wrap: wrap;
    align-items: baseline;
  }

  .api-flow {
    gap: 4px;
    justify-content: center;
  }

  .api-flow div {
    width: clamp(72px, 24vw, 90px);
    height: clamp(72px, 24vw, 90px);
    flex: none;
  }

  .api-flow i {
    flex: none;
  }

  .story-content {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .security-list > div > div,
  .cta-box > div,
  .footer-bottom > * {
    min-width: 0;
  }

  .cta-box {
    width: calc(100% - 24px);
  }

  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  h1,
  h2,
  h3,
  p,
  summary,
  a {
    overflow-wrap: break-word;
  }
}

@media (max-width: 360px) {
  .hero-product {
    transform: scale(.78);
    margin: -52px 0;
  }

  .api-flow div {
    width: 68px;
    height: 68px;
  }

  .api-flow b {
    font-size: 8px;
  }
}