/* ==========================================================================
   ShareDeploy — Responsive Overrides
   Desktop-first: base styles target large screens, these queries scale down.
   ========================================================================== */

/* ---------- Large desktop / laptop ---------- */
@media (max-width: 1200px) {
  :root {
    --space-xl: 6rem;
    --space-2xl: 9rem;
  }

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

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .nav__links { gap: var(--space-md); }

  /* Keep the flow connected in a single row down through small laptops —
     only truly wrap it once nodes can no longer breathe (680px, below). */
  .flow-node { width: 110px; }
  .flow-node__icon { width: 38px; height: 38px; }
  .flow-node__label { font-size: 0.78rem; }
  .hero-flow__line { top: 35px; }

  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }

  .comparison__grid { grid-template-columns: 1fr; }
  .comparison__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Small tablet / large mobile ---------- */
@media (max-width: 860px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 4.5rem;
    --space-2xl: 6rem;
  }

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

  /* Navigation collapses to hamburger */
  .nav__links,
  .nav__login { display: none; }
  .nav__burger { display: block; }
  .mobile-menu { display: flex; }

  /* Hero */
  .hero { padding-top: 100px; text-align: left; }
  .hero__cta { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .hero-flow__nodes { flex-wrap: wrap; row-gap: var(--space-lg); justify-content: flex-start; }
  .flow-node { width: 30%; }
  .hero-flow__line { display: none; }

  /* Problem cards: drop sticky-stack in favor of a simple vertical reveal */
  .problem__layout { grid-template-columns: 1fr; }
  .problem__progress { display: none; }
  .problem-card {
    padding: var(--space-md) 0;
    flex-direction: column;
    gap: var(--space-xs);
    position: static;
    margin-bottom: 0;
  }
  .problem-card__index { width: auto; font-size: 2.5rem; margin-bottom: 0.25rem; }

  /* Process becomes vertical */
  .process__track {
    flex-direction: column;
    gap: var(--space-lg);
    padding: 0;
  }
  .process__line { display: none; }
  .process-step { flex: none; padding-top: var(--space-lg); padding-left: var(--space-lg); }
  .process-step__num { top: 0; left: 0; }

  /* Apps grid */
  .apps__grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .stat { flex-basis: 40%; }

  /* Features stack, visuals always on top */
  .feature-row,
  .feature-row--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .feature-row--reverse .feature-row__visual,
  .feature-row--reverse .feature-row__text { order: initial; }

  /* Comparison */
  .comparison__panel { padding: var(--space-md); }

  /* Testimonials */
  .testimonials__grid { grid-template-columns: 1fr; gap: var(--space-md); }

  /* Pricing stacks */
  .pricing__grid { grid-template-columns: 1fr; }
  .price-card--featured { order: -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .container { padding: 0 var(--space-sm); }

  .hero__headline { font-size: clamp(2.25rem, 11vw, 3rem); }
  .hero__sub { font-size: 1.05rem; }

  .flow-node { width: 45%; }

  .apps__grid { grid-template-columns: 1fr 1fr; }
  .app-card { padding: var(--space-md) var(--space-sm); }

  .stats__grid { row-gap: var(--space-md); }
  .stat { flex-basis: 100%; max-width: 280px; }

  .final-cta__title { font-size: clamp(1.85rem, 8vw, 2.5rem); }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .footer__links { flex-wrap: wrap; }
}

/* ---------- Fine pointer only: hide custom cursor UI on touch ---------- */
@media (hover: none), (pointer: coarse) {
  .cursor-dot { display: none !important; }
}