/* ==========================================================================
   Responsive overrides — loaded after every component's base styles so
   these rules win the cascade at their breakpoints.
   ========================================================================== */

@media (max-width: 720px) {
  .nav {
    padding: 1.1rem 1.25rem;
  }

  .hero {
    min-height: 88vh;
    padding: 5.5rem 1.25rem 3.5rem;
  }

  .hero__shape {
    display: none;
  }

  .card--app {
    padding: 1.5rem;
  }

  #tabuada {
    font-size: 0.85rem;
  }

  #tabuada thead td,
  #tabuada tbody td {
    padding: 0.6rem 0.35rem;
  }
}

@media (max-width: 400px) {
  .hero__subtitle {
    font-size: 0.95rem;
  }

  #tabuada {
    font-size: 0.78rem;
  }
}