@media (max-width: 768px) {
    .pricing-container { padding: 0 10px !important; }
    .pricing-grid { gap: 15px !important; display: flex !important; flex-direction: column !important; }
    
    .pricing-card {
      width: 100% !important;
      max-width: 480px !important;
      margin: 0 auto !important;
      transform: none !important;
    }

    .card-content {
      display: grid !important;
      grid-template-columns: 1.3fr 1fr !important; 
      grid-template-areas: 
        "info price"
        "img price"
        "img benefits"
        "button button" !important;
      text-align: left !important;
      column-gap: 15px !important;
      padding: 15px !important;
    }

    .info-area { grid-area: info; align-self: start; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
    .img-area { grid-area: img; justify-self: center; display: flex !important; justify-content: center !important; }
    .price-area { grid-area: price; text-align: right !important; align-self: start; display: flex !important; flex-direction: column !important; align-items: flex-end !important; }
    .benefits-area { grid-area: benefits; border-top: none !important; padding-top: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
    .button-area { grid-area: button; margin-top: 10px !important; width: 100% !important; }

    .price-main { font-size: 60px !important; }
    
    .product-img { width: 190px !important; margin: 0 !important; max-width: 100% !important; height: auto !important; }
    .benefit-text { font-size: 16px !important; }
  }