/* =====================================================================
   ERGOSPHERE — REDESIGNED SECTIONS 01–06 : RESPONSIVE
   Append this to the END of css/ergosphere-mobile.css.

   Your existing mobile rules already handle section padding/spacing by
   ID (#problem, #toolkit, #modules, #how, #trust, #maturity) — those
   keep working untouched. These rules only collapse the NEW .esx_*
   layouts on tablet/phone. No conflicts with existing classes.
   ===================================================================== */

@media (max-width: 1040px) {

  /* Two-column splits collapse to single column */
  .esx_problem,
  .esx_trustsplit,
  .esx_matsplit {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .esx_phead .esx_ghost { font-size: 110px; top: -48px; }
  .esx_trustaside { position: static !important; }

  /* Toolkit split header stacks; stat boxes drop below the heading */
  .esx_thead { flex-direction: column; align-items: flex-start; gap: 28px; }

  /* Stepper goes vertical with a connecting line down the left */
  .esx_stepper { grid-template-columns: 1fr !important; gap: 0; margin-top: 40px; }
  .esx_stepper::before { display: none; }
  .esx_step { display: grid; grid-template-columns: 72px 1fr; gap: 24px; text-align: left; padding-bottom: 30px; position: relative; }
  .esx_step:not(:last-child)::after { content: ''; position: absolute; left: 35px; top: 80px; bottom: 0; width: 2px; background: rgba(0,212,255,.3); }
  .esx_node { margin: 0; box-shadow: none; }
  .esx_step p { text-align: left; max-width: none; }

  /* Module rows stack: icon/number above the text, lists single-column */
  .esx_modrow,
  .esx_modrow.esx_rev { grid-template-columns: 1fr !important; gap: 26px; }
  .esx_modrow .esx_aside,
  .esx_modrow .esx_modmain,
  .esx_modrow.esx_rev .esx_aside,
  .esx_modrow.esx_rev .esx_modmain { grid-column: 1 !important; grid-row: auto !important; }
  .esx_modrow.esx_rev .esx_aside { justify-content: flex-start; }
  .esx_modlist { grid-template-columns: 1fr; }

  /* Pricing tiers stack; includes list goes single column */
  .esx_pricewrap { grid-template-columns: 1fr !important; gap: 20px; }
  .esx_pricelist { grid-template-columns: 1fr; }

  /* Stacked: drop the founding card's lift so it aligns with the standard tier */
  .esx_pricecard_feature { transform: none; }
  .esx_pricecard_feature:hover { transform: translateY(-6px); }

  /* Education panel: well + content side by side, seal drops below on its own row */
  .esx_priceedu { grid-template-columns: auto 1fr; gap: 24px 28px; }
  .esx_priceedu_emblem { grid-column: 1 / -1; padding-top: 26px; margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: center; }

}

@media (max-width: 600px) {

  .esx_head h3,
  .esx_phead h3,
  .esx_thead h3 { font-size: 26px !important; letter-spacing: 2px !important; }

  .esx_quoteband { grid-template-columns: 1fr; gap: 14px; }
  .esx_quoteband .esx_quote { font-size: 22px; }

  .esx_stats { width: 100%; }
  .esx_stat { flex: 1; min-width: 0; }

  .esx_pricecard { padding: 32px 26px; }
  .esx_priceamt { font-size: 44px; }
  .esx_priceincl { padding: 28px 26px; }

  /* Education panel: full single-column stack on phones, seal centred */
  .esx_priceedu { grid-template-columns: 1fr; padding: 32px 26px; gap: 20px; justify-items: start; }
  .esx_priceedu_emblem { width: 100%; }
  .esx_priceedu_seal { width: 124px; height: 124px; }
  .esx_priceedu_spark { transform-origin: 3.5px 58px; }
  .esx_priceedu_amt { font-size: 36px; }

}