/* Mobile overrides for landing.html / partner.html / activate.html.
   Applied via <link rel="stylesheet" href="/pages/mobile.css">.
   These pages are authored at fixed 1440px; this stylesheet collapses them
   to a usable single-column phone layout. Activates only ≤768px. */

@media (max-width: 768px) {
  html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  body { font-size: 16px !important; }
  img, svg, video { max-width: 100% !important; height: auto !important; }

  /* ---------- generic resets for sections using fixed paddings ---------- */
  .hero, .framework, .method, .science, .cmap, .process, .blueprint,
  .esmf, .cta, .footer, .reg, .apply, .stats, .how, .partners, .faq, .testimonials {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ---------- nav ---------- */
  .nav, .navbar {
    height: auto !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .nav-left, .nav-right { gap: 12px !important; flex-wrap: wrap !important; }
  .nav-left .nav-link, .nav-right .nav-link { display: none !important; }
  .logo-text, .logo .logo-text { font-size: 20px !important; }
  .nav-btn { padding: 10px 14px !important; font-size: 14px !important; }

  /* ---------- hero ---------- */
  .hero { padding: 96px 20px 56px !important; }
  .hero-inner { gap: 16px !important; }
  .hero-title { font-size: 40px !important; line-height: 1.05 !important; }
  .hero-sub, .hero-eyebrow { font-size: 15px !important; line-height: 1.5 !important; }
  .hero-actions { flex-direction: column !important; gap: 12px !important; width: 100% !important; }
  .hero-actions > * { width: 100% !important; }
  .btn-primary, .btn-glass, .btn-solid, .btn-outline, .btn-outline-d,
  .cta-btn, .bp-btn, .aw-continue, .nav-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
  .nav-btn { width: auto !important; }
  .horizon-top, .horizon-bottom, .sci-horizon, .fw-horizon-green, .fw-horizon-orange, .esmf-horizon { height: 80px !important; }

  /* ---------- universal headings ---------- */
  .fw-title, .method-title, .sci-title, .cmap-title, .proc-title,
  .bp-title, .cta-title, .reg-title, .how-title, .apply-title,
  .esmf-quote-text {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .fw-label, .method-label, .sci-label, .cmap-label, .proc-label, .bp-label { font-size: 13px !important; }
  .fw-intro, .method-intro, .sci-intro, .cmap-intro, .bp-intro, .reg-desc, .reg-note, .apply-desc, .hero-eyebrow { font-size: 15px !important; line-height: 1.5 !important; }

  /* ---------- framework section: stack everything, hide complex diagram ---------- */
  .fw-head, .fw-cards, .method-row, .sci-cards, .proc-row, .proc-grid,
  .bp-grid, .bp-row, .cmap-head, .stats-row, .reg, .apply, .how,
  .cta-inner, .esmf, .esmf-quote {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .fw-card, .sci-card-col, .sci-card, .proc-card, .bp-feature, .bp-row,
  .stat, .how-step, .how-steps, .how-title, .reg-left, .apply-left,
  .method-left, .method-right, .cta-textblock, .cta-actions,
  .esmf-quote, .esmf-img {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* hide the desktop-only somatic diagram (absolute-positioned rings/pills) */
  .fw-diagram-wrap, .fw-diagram, .ring, .fw-pill, .fw-biofield, .fw-dot { display: none !important; }

  /* ---------- science cards row → stack, neutralize absolute glows/images ---------- */
  .sci-cards { gap: 16px !important; }
  .sci-card { width: 100% !important; height: auto !important; min-height: 320px !important; }
  .sci-card-glow, .sci-card-img, .sci-card-fade { display: none !important; }
  .sci-card-text { position: static !important; padding: 24px !important; width: 100% !important; }
  .sci-head-row { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .sci-nav { align-self: flex-end !important; }

  /* ---------- body-map table → stacked cards ---------- */
  .cmap-table {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .cmap-cell, .cmap-head-cell { width: 100% !important; padding: 16px !important; }
  .cmap-head-cell { font-weight: 600 !important; background: var(--card, #EBE5D0) !important; }

  /* ---------- registration / apply image ---------- */
  .reg-img, .apply-img {
    width: 100% !important;
    height: 360px !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .reg { gap: 24px !important; }
  .field-row { flex-direction: column !important; gap: 16px !important; }
  .input { font-size: 16px !important; }

  /* ---------- stats ---------- */
  .stats-row { gap: 24px !important; }
  .stat-num { font-size: 40px !important; line-height: 1.1 !important; }

  /* ---------- how it works steps ---------- */
  .how { gap: 24px !important; }
  .how-step { padding: 20px !important; }
  .how-num { font-size: 13px !important; }
  .how-step-title { font-size: 16px !important; }
  .how-step-desc { font-size: 14px !important; line-height: 1.5 !important; }

  /* ---------- process / blueprint grids ---------- */
  .proc-grid, .bp-grid { gap: 16px !important; }
  .proc-card, .bp-feature { padding: 20px !important; }
  .proc-h, .bp-h { font-size: 18px !important; }
  .proc-p, .bp-p { font-size: 14px !important; line-height: 1.5 !important; }
  .proc-text-center, .proc-text-left { padding: 0 !important; }

  /* ---------- CTA ---------- */
  .cta-inner { gap: 24px !important; text-align: center !important; align-items: center !important; }
  .cta-textblock { align-items: center !important; }
  .cta-actions { flex-direction: column !important; width: 100% !important; gap: 12px !important; }
  .cta-actions > * { width: 100% !important; }

  /* ---------- footer ---------- */
  .footer { padding: 40px 20px !important; flex-direction: column !important; gap: 24px !important; align-items: flex-start !important; height: auto !important; }
  .footer-links { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
  .footer-logo, .footer-logo .ft-text, .footer-wm { font-size: 18px !important; }

  /* ---------- assessment wizard overlay: stack rows, neutralize fixed widths ---------- */
  .aw-overlay { font-size: 15px !important; }
  .aw-main { width: 100% !important; max-width: 100% !important; padding: 32px 20px !important; gap: 32px !important; }
  .aw-nav { height: auto !important; min-height: 64px !important; padding: 12px 16px !important; }
  .aw-row { flex-direction: column !important; gap: 24px !important; align-items: stretch !important; }
  .aw-left, .aw-cards, .aw-card-col, .aw-col2, .aw-slider-col, .aw-slider-row, .aw-result-col {
    width: 100% !important;
    max-width: 100% !important;
  }
  .aw-step-title { font-size: 32px !important; line-height: 1.1 !important; }
  .aw-step-sub { width: 100% !important; font-size: 15px !important; }
  .aw-cards { flex-direction: column !important; gap: 12px !important; }
  .aw-card { width: 100% !important; }
  .aw-tiers { flex-direction: column !important; gap: 12px !important; }
  .aw-tier-wrap, .aw-tier { width: 100% !important; min-height: auto !important; }

  /* ---------- accordion (method section) ---------- */
  .acc-head { padding: 16px !important; }
  .acc-title { font-size: 16px !important; }
  .acc-desc { font-size: 14px !important; padding: 0 16px 16px !important; }

  /* ---------- ESMF quote / image ---------- */
  .esmf-quote-text { font-size: 24px !important; line-height: 1.25 !important; }
  .esmf-img { width: 100% !important; height: 280px !important; background-size: cover !important; background-position: center !important; }
}