/* Study Chinese — responsive breakpoints + reduced-motion. Loaded after styles.css. */

@media (max-width: 1080px) {
  .jc-grid { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 56px); }
  .jc-stage { order: -1; }
  .jc-head { text-align: center; }
}

@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-stage { display: none; }                 /* mobile: inline per-step images */
  .story-step { min-height: 0; opacity: 1; padding: clamp(40px, 9vw, 64px) 0; }
  .story-step .story-step-shot { display: block; margin-top: 28px; max-width: 300px; }
  .road-grid { grid-template-columns: 1fr; }
  .road-stage { order: -1; }
  .road-copy h2, .road-body { max-width: none; }
  .bao-grid { grid-template-columns: 1fr; text-align: center; }
  .bao-points { align-items: center; }
  .bao-bubble { right: 4%; }
  .pillar-rmb { grid-template-columns: 1fr; }
  .pillar-rmb .pillar-art { order: -1; min-height: 220px; }
  .how-steps { grid-template-columns: 1fr; max-width: 520px; }
  .wg-grid { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 54px); }
  .wg-body { max-width: none; }
  .wg-stage { min-height: 500px; }
  .hero-bao { left: auto; right: max(2vw, calc(50% - 300px)); bottom: 2%; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
}

@media (max-width: 680px) {
  .stats-row { gap: 18px 30px; }
}

@media (max-width: 640px) {
  .cam-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cam-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; width: min(86vw, 420px); }
  .cam-phone { width: 198px; }
  .cam-num { font-size: 2rem; }
  .cam-sub { margin-inline: auto; }
}

@media (max-width: 560px) {
  .wg-phone { width: clamp(148px, 44vw, 196px); }
  .wg-lock, .wg-home { animation: none; }
  .wg-home { transform: translate(-22%, -50%) rotate(3deg); }
  .wg-lock { transform: translate(-78%, -50%) rotate(-3deg); }
  .wg-stage { min-height: 430px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .nav-in { height: 62px; gap: 8px; }
  .nav-right { gap: 8px; }
  .brand-name { font-size: 1rem; }
  .nav-cta { padding: 9px 15px; font-size: .86rem; }
  .lang-b { padding: 8px 12px; font-size: .8rem; }
  .waitlist-row { flex-direction: column; background: transparent; border: 0; box-shadow: none; padding: 0; gap: 12px; }
  .waitlist-row .field { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow); padding: 15px 20px; width: 100%; }
  .waitlist .btn-primary { width: 100%; }
  .waitlist-dark .waitlist-row .field { background: var(--forest-card); border-color: rgba(143, 230, 176, .18); }
  .social-card { font-size: .92rem; }
  .jc-cta { flex-direction: column; align-items: stretch; }
  .jc-cta .btn { width: 100%; }
  .jc-fly { left: 0; max-width: 200px; }
  .jc-badge-free { right: 0; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js .reveal, .js .reveal.from-left, .js .reveal.from-right, .js .reveal.pop {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .floatzi, .phone, .petal, .petals { animation: none !important; }
  .petals { display: none; }
  .marquee-track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .scroll-progress { display: none; }
  .hero-title em::after { transition: none !important; transform: none !important; }
  .story-shot { transition: none !important; filter: none !important; }
  .story-step.is-active .story-ic { animation: none !important; }
  .xue-stroke { animation: none !important; stroke-dashoffset: 0 !important; }
  .form-msg.ok { animation: none !important; }
  .hero-chip { transform: none !important; }
  .hero-bao img, .bao-bubble, .final-bao img { animation: none !important; }
  .js .jc-stage.in .jc-fly { animation: none !important; }
  .chapter-rail img, .how-step, .jc-feat { transition: none; }
  .btn, .social-card, .follow-link, .vcard, .story-step, .brand-mark { transition: none; }
  .btn:active, .social-card:active, .follow-link:active, .lang-b:active { transform: none; }
  .brand:hover .brand-mark { transform: none; }
}