/* Responsive — three breakpoints. Mobile-first overrides the desktop
   layouts in components.css so the cascade is predictable.
   Touch targets ≥44px on mobile; form fields ≥16px to prevent iOS zoom. */

/* ── Tablet (641–1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --section-pad-y: clamp(56px, 8vw, 96px);
  }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row    { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .live-grid    { grid-template-columns: 1fr; gap: var(--space-5); }
  .shop-room-grid { grid-template-columns: 1fr; }
  .pricing-row  { grid-template-columns: 1fr 1fr; }

  .hero { min-height: 88vh; }
  .hero h1 { font-size: clamp(36px, 6vw, 64px); }
  .car-jeep { width: 144px; height: 144px; background-size: 1152px 144px; }
  .bird-chick { display: block; }
  .walker.walker-3 { display: none; }

  .legal-toc ol { grid-template-columns: 1fr; }
}

/* ── Mobile (≤640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --t-hero: clamp(34px, 9vw, 48px);
    --t-section: clamp(24px, 6vw, 32px);
    --section-pad-y: 56px;
    --nav-h: 56px;
  }

  /* Nav becomes a CSS-only burger menu */
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(15, 20, 38, 0.95);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    transform: translateY(-110%);
    transition: transform 260ms cubic-bezier(.2,.7,.2,1);
  }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
    display: flex; align-items: center;
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-burger { display: block; min-height: 44px; min-width: 44px; }
  .nav-menu-toggle:checked ~ .nav-links { transform: translateY(0); }

  /* Hero — single column, smaller sprites, fewer city layers */
  .hero { min-height: 88vh; padding-top: calc(var(--nav-h) + var(--space-5)); }
  .hero h1 { line-height: 1.1; }
  .hero-tag { font-size: var(--t-md); }
  .hero-meta { font-size: 14px; gap: var(--space-3); }

  .city-layer.layer-1,
  .city-layer.layer-2 { display: none; }
  .car-jeep { width: 110px; height: 110px; background-size: 880px 110px; bottom: 2%; }
  .walker { width: 96px; height: 96px; background-size: 960px 96px; bottom: 4%; }
  .walker.walker-3 { display: none; }
  .walker.walker-2 { display: none; }
  .bird-chick { transform: scale(1.2); top: 18%; }

  /* Grids → single column */
  .feature-grid,
  .steps-row,
  .pricing-row,
  .shop-strip { grid-template-columns: 1fr; }

  .pomodoro-time { font-size: clamp(48px, 12vw, 64px); }
  .pomodoro-foot { flex-direction: column; gap: 8px; }

  /* Comparison table → bullet list */
  .compare-table { display: none; }
  .compare-mobile { display: block; padding: 0; margin: 0; list-style: none; }

  .feedback-panel { padding: var(--space-4); }
  .feedback-submit-row { flex-direction: column; align-items: stretch; }
  .feedback-submit-row .btn { width: 100%; }

  .footer-links { gap: var(--space-3); }

  .legal-shell { padding-top: calc(var(--nav-h) + var(--space-5)); }
  .legal-body p, .legal-body li { font-size: var(--t-md); line-height: 1.85; }

  /* Hide aura on phones to reduce GPU load */
  .aura-glow { display: none; }
}

/* ── Small mobile (≤380px) — tighten further ─────────────── */
@media (max-width: 380px) {
  .container { padding: 0 var(--space-3); }
  .btn { padding: 12px 18px; font-size: 12px; }
  .hero h1 { font-size: clamp(28px, 9vw, 40px); }
}

/* ── Touch hover suppression ─────────────────────────────── */
@media (hover: none) {
  .feature-card:hover,
  .panel--lift:hover,
  .use-card:hover,
  .shop-item:hover {
    transform: none;
    box-shadow: var(--shadow-panel);
  }
}