.pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price .btn {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 820px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .price {
    padding: 20px 16px;
  }

  .price h3 {
    min-height: 2.6em;
    margin: 8px 0;
    font-size: 17px;
  }

  .price strong {
    font-size: 31px;
  }

  .price ul {
    margin: 16px 0;
    font-size: 12px;
  }

  .price li {
    padding: 6px 0;
  }

  .price .btn {
    min-height: 44px;
    padding: 10px;
    justify-content: center;
    font-size: 12px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(var(--wrap), calc(100% - 28px));
  }

  .hero {
    padding: 106px 0 46px;
  }

  .hero h1 {
    margin: 15px 0 18px;
    font-size: clamp(45px, 13vw, 58px);
  }

  .hero .actions {
    margin-top: 24px;
  }

  .hero .actions .btn:nth-child(n + 3) {
    display: none;
  }

  .tunnel {
    max-width: 260px;
  }

  .quick-actions {
    padding: 28px 0 42px;
  }

  .action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .action-tile {
    min-height: 126px;
    padding: 15px;
  }

  .action-tile strong {
    font-size: 16px;
  }

  .action-tile small {
    font-size: 12px;
  }

  .section {
    padding: 54px 0;
  }

  .section-head {
    gap: 16px;
    margin-bottom: 32px;
  }

  .section-head p {
    font-size: 15px;
  }

  .feature,
  .feature + .feature {
    padding: 22px 0;
  }

  .feature h3 {
    margin: 14px 0 6px;
  }

  .steps {
    gap: 10px;
  }

  .step {
    padding: 20px;
  }

  .step h3 {
    margin: 18px 0 6px;
    font-size: 19px;
  }

  .step p {
    margin: 0;
  }

  .referral-band {
    padding: 54px 0;
  }

  .faq details {
    padding: 17px 0;
  }
}