/* ═══════════════════════════════════════════════════
   ARONAX — RESPONSIVE (mobile ≤ 640px, tablet ≤ 1024px)
   ═══════════════════════════════════════════════════ */

/* ── Container padding ────────────────────────────── */
@media (max-width: 1024px) {
  [data-container] { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 640px) {
  [data-container] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Nav ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-nav-links] { display: none !important; }
  [data-nav-cta] { display: none !important; }
  [data-nav-bar] { height: 60px !important; }
  [data-nav-burger] { display: flex !important; }
  [data-mobile-menu] {
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
    background: oklch(0.13 0.008 60 / 0.96);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 32px; z-index: 49;
  }
  [data-mobile-menu] a {
    font-size: 20px !important; font-family: var(--serif);
  }
}

/* ── Hero ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-hero-grid] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  [data-hero-portrait] { max-width: 380px !important; margin: 0 auto; }
  [data-hero-stats] { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 640px) {
  [data-hero-grid] { gap: 36px !important; }
  [data-hero-portrait] { max-width: 300px !important; }
  [data-hero-stats] { gap: 16px !important; }
  [data-hero-coord] { display: none !important; }
  section[style*="paddingTop: 64"] { padding-top: 32px !important; padding-bottom: 60px !important; }
}

/* ── Manifest ─────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-manifest-grid] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 640px) {
  [data-manifest-grid] { gap: 24px !important; }
  [data-section="manifest"] { padding: 80px 0 !important; }
}

/* ── How it works ─────────────────────────────────── */
@media (max-width: 1024px) {
  [data-how-grid] {
    grid-template-columns: 1fr !important;
  }
  [data-how-step] {
    border-right: none !important;
    border-bottom: 1px solid var(--hair) !important;
    padding: 32px 24px 36px !important;
  }
  [data-how-step]:last-child { border-bottom: none !important; }
}
@media (max-width: 640px) {
  [data-how-step] { padding: 28px 16px 32px !important; }
  [data-how-step] .serif[style*="fontSize: 72"] { font-size: 48px !important; }
  #how { padding: 80px 0 !important; }
}

/* ── Product Preview ──────────────────────────────── */
@media (max-width: 1024px) {
  [data-preview-grid] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-preview-sticky] { position: static !important; }
}
@media (max-width: 640px) {
  [data-preview-grid] { gap: 28px !important; }
  #preview { padding: 80px 0 !important; }
  [data-preview-bar] { flex-wrap: wrap !important; }
  [data-preview-bar] span[style*="marginLeft"] { display: none !important; }
}

/* ── Ranks ────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-ranks-grid] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-rank-detail] { padding: 24px !important; }
  [data-rank-detail] h3 { font-size: 32px !important; }
}
@media (max-width: 640px) {
  [data-ranks-grid] { gap: 28px !important; }
  #ranks { padding: 80px 0 !important; }
  [data-rank-list] button {
    grid-template-columns: 32px 1fr auto !important;
    gap: 10px !important; padding: 12px 12px !important;
  }
  [data-rank-list] button > span:last-child { display: none !important; }
}

/* ── Safety ───────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-safety-grid] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-safety-sidebar] { position: static !important; }
  [data-safety-checks] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  #safety { padding: 80px 0 !important; }
  [data-safety-checks] { grid-template-columns: 1fr !important; }
  [data-safety-check] { padding: 16px 18px !important; }
}

/* ── Story ────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-story-grid] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  [data-story-portrait] { max-width: 380px !important; margin: 0 auto; }
}
@media (max-width: 640px) {
  #story { padding: 80px 0 !important; }
  [data-story-grid] { gap: 32px !important; }
  [data-story-portrait] { max-width: 300px !important; }
  [data-story-quote] { padding-left: 20px !important; font-size: 24px !important; }
}

/* ── FAQ ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-faq-grid] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-faq-heading] { position: static !important; }
}
@media (max-width: 640px) {
  [data-section="faq"] { padding: 80px 0 !important; }
  [data-faq-grid] { gap: 24px !important; }
  [data-faq-q] { font-size: 18px !important; }
}

/* ── Contact / FinalCTA ───────────────────────────── */
@media (max-width: 1024px) {
  [data-contact-box] { padding: 48px 40px !important; }
  [data-contact-grid] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 640px) {
  #contact { padding: 80px 0 60px !important; }
  [data-contact-box] { padding: 32px 20px !important; }
  [data-contact-grid] { gap: 28px !important; }
  [data-contact-fields-row] { grid-template-columns: 1fr !important; }
  [data-contact-corner] { display: none !important; }
}

/* ── Footer ───────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-footer-grid] {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
}
@media (max-width: 640px) {
  [data-footer-grid] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [data-footer-bottom] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ── Section padding global reduction ─────────────── */
@media (max-width: 640px) {
  section { scroll-margin-top: 60px !important; }
}

/* ── Typography scale for mobile ──────────────────── */
@media (max-width: 640px) {
  h2.serif { margin-bottom: 24px; }
}