/* ══ Tablet (≤768px) ══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero */
  .hero { padding: 64px 24px 56px; }
  .hero-h1 { font-size: 48px; letter-spacing: -2px; }
  .hero-sub { font-size: 16px; }

  /* Panel section: text above, mockup below */
  .panel-sec {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 24px;
  }
  .pml-root { width: 100%; max-width: 420px; margin: 0 auto; }

  /* Effects: 2 columns */
  .fx-sec { padding: 60px 24px; }
  .fx-grid { grid-template-columns: repeat(2, 1fr); }

  /* How it works: number + text, no illustration */
  .how-sec { padding: 60px 24px; }
  .step { grid-template-columns: 60px 1fr; gap: 16px; }
  .step-illus { display: none; }

  /* Features: 2 columns */
  .feat-sec { padding: 60px 24px; }
  .feat-grid { grid-template-columns: 1fr 1fr; }

  /* Pricing */
  .price-sec { padding: 60px 24px; }
  .price-card { padding: 32px 24px; width: 100%; max-width: 420px; }

  /* Bake callout */
  .bake-box { flex-direction: column; gap: 24px; }

  /* Section h2 */
  .sec-h2 { font-size: 30px; }
}

/* ══ Mobile (≤480px) ══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero */
  .hero { padding: 48px 20px 40px; }
  .hero-h1 { font-size: 36px; letter-spacing: -1.5px; }
  .hero-badge { font-size: 10px; padding: 5px 12px; }
  .hero-cta { flex-direction: column; align-items: center; gap: 12px; }
  .btn-primary { width: 100%; justify-content: center; }

  /* Panel mockup: hide on small mobile */
  .pml-root { display: none; }
  /* Replacement message */
  .panel-sec::after {
    content: "See the full panel at textiomate.com on desktop";
    display: block; text-align: center;
    color: var(--text-dim); font-size: 12px;
    padding: 24px; border: 1px dashed var(--border); border-radius: 8px;
  }

  /* Effects: 1 column */
  .fx-grid { grid-template-columns: 1fr; }

  /* Features: 1 column */
  .feat-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .price-card { padding: 28px 20px; }
  .p-amt { font-size: 52px; }

  /* Section headings */
  .sec-h2 { font-size: 26px; }

  /* lp padding */
  .lp { padding: 0 4px; }
}