/* ============================================================
   Farhan And Sons — Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dash-body {
    grid-template-columns: 3.5rem 1fr 8.5rem;
  }

  .pricing-card--featured {
    transform: none;
  }

  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 900px) {
  .hero-grid,
  .split,
  .grid-2,
  .bento,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding: var(--space-8) 0 var(--space-9);
  }

  .hero h1,
  .page-hero h1 {
    max-width: none;
  }

  .dash-mockup,
  .dash-mockup:hover,
  .dash-mockup--flat:hover,
  .tech-panel,
  .tech-panel:hover {
    transform: none;
    max-width: 32rem;
    margin-inline: auto;
  }

  .hero-showcase {
    max-width: 28rem;
  }

  .hero-showcase-frame {
    animation: none;
  }

  .pricing-grid,
  .grid-3 {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-1);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease), opacity var(--duration) var(--ease),
      visibility var(--duration) var(--ease);
    z-index: 99;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-nav > a:not(.nav-cta) {
    padding: var(--space-3) var(--space-4);
  }

  .nav-cta {
    margin-left: 0;
    margin-top: var(--space-2);
  }

  .nav-cta .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --header-h: 3.85rem;
  }

  .container,
  .container--narrow {
    width: min(100% - 1.5rem, var(--container));
  }

  .logo-link img {
    height: 2.35rem;
  }

  .section {
    padding: var(--space-8) 0;
  }

  .grid-4,
  .process-steps,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .dash-body,
  .tech-panel-body {
    grid-template-columns: 1fr;
  }

  .dash-rail,
  .tech-panel-side {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.65rem;
  }

  .dash-cart {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .dash-stats {
    grid-template-columns: 1fr 1fr;
  }

  .dash-stats .dash-stat:last-child {
    grid-column: 1 / -1;
  }

  .page-hero,
  .hero {
    padding: var(--space-7) 0;
  }

  .policy-content,
  .bento-panel,
  .contact-aside {
    padding: var(--space-5);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  .hero-orb {
    display: none;
  }

  .logo-link img {
    height: 2.55rem;
  }

  .trust-row {
    flex-direction: column;
    gap: var(--space-2);
  }

}

@media (min-width: 901px) {
  .site-nav {
    display: flex !important;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    backdrop-filter: none;
  }
}