@media (max-width: 1180px) {
  .mk-nav {
    position: fixed;
    inset: 86px 16px auto;
    z-index: 999;
    display: none;
    padding: 18px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: rgba(5, 7, 22, .95);
    box-shadow: var(--mk-shadow-card);
    backdrop-filter: blur(24px);
  }

  .mk-nav.is-open {
    display: block;
  }

  .mk-nav-list {
    display: grid;
    gap: 4px;
  }

  /* fix-2026-05-16: mobile menu was reading as centered. Force every menu
     row hard-left (icon/label start-aligned) and neutralise the desktop
     `.mk-nav{justify-content:center}` now that the panel is a block card. */
  .mk-nav {
    justify-content: flex-start;
    text-align: left;
  }

  .mk-nav-list a {
    justify-content: flex-start;
    text-align: left;
    min-height: 48px;
    width: 100%;
  }

  .mk-header-shell {
    grid-template-columns: auto 1fr auto;
  }

  /* fix-2026-05-16: keep the account + cart icons reachable on tablet/phone
     (skill: persistent-nav). Only the text CTA buttons collapse into the
     hamburger / sticky CTA. Chips go icon-only (aria-label still present). */
  .mk-header-actions .mk-glass-button:not(.mk-header-button) {
    display: none;
  }

  .mk-account-link .mk-action-label,
  .mk-cart-link .mk-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .mk-account-link,
  .mk-cart-link {
    gap: 0;
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  /* Icon-only chip: float the cart count as a corner badge so it doesn't
     fight the icon inside the 44px circle. */
  .mk-cart-link .mk-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    border: 2px solid var(--mk-bg-900);
  }

  .mk-menu-toggle {
    display: inline-flex;
  }

  .mk-mobile-sticky-cta {
    display: grid;
  }

  body.mk-theme-shell {
    padding-bottom: 86px;
  }
}

@media (max-width: 1024px) {
  .mk-hero-grid,
  .mk-how-grid,
  .mk-demo-grid,
  .mk-setup-grid,
  .mk-product-hero-grid,
  .mk-internal-hero-grid,
  .mk-article-shell,
  .mk-footer-cta {
    grid-template-columns: 1fr;
  }

  .mk-cockpit-preview {
    min-height: 500px;
  }

  .mk-cockpit-shell {
    margin-inline: auto;
    transform: none;
  }

  .mk-feature-grid,
  .mk-benefit-grid,
  .mk-proof-grid,
  .mk-pricing-grid,
  .mk-post-grid,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-trust-strip-inner,
  .mk-stats-grid,
  .mk-license-explain,
  .mk-order-ready-grid,
  .mk-order-confirmation-steps,
  .woocommerce-order-received .woocommerce-order-overview,
  .mk-checkout-confidence-grid,
  .mk-internal-card-grid,
  .mk-internal-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-footer-brand {
    grid-column: 1 / -1;
  }

  .mk-article-toc {
    display: none;
  }
}

@media (max-width: 760px) {
  .mk-container,
  .mk-container-wide,
  .mk-wrap {
    width: min(100% - 24px, var(--mk-container));
  }

  .mk-header-shell {
    border-radius: 24px;
  }

  /* fix-2026-05-16: previously `.mk-header-actions{display:none}` wiped the
     cart AND any account access off every phone — buyers literally could
     not reach their cart on mobile. Now the actions row stays; only the
     brand tagline and the text CTA buttons drop (the sticky mobile CTA bar
     already carries the primary action). Account + cart icons persist. */
  .mk-brand small {
    display: none;
  }

  .mk-header-actions {
    display: flex;
    gap: 8px;
  }

  .mk-header-actions .mk-glass-button {
    display: none;
  }

  .mk-nav {
    inset: 82px 12px auto;
  }

  .mk-hero {
    padding-top: 54px;
  }

  .mk-hero h1,
  .mk-page-hero h1 {
    font-size: clamp(2.3rem, 14vw, 4rem);
  }

  .mk-feature-grid,
  .mk-benefit-grid,
  .mk-proof-grid,
  .mk-pricing-grid,
  .mk-grid-2,
  .mk-grid-3,
  .mk-grid-4,
  .mk-grid-6,
  .mk-post-grid,
  .woocommerce ul.products,
  .mk-trust-strip-inner,
  .mk-stats-grid,
  .mk-license-explain,
  .mk-feature-pills,
  .mk-warning-grid,
  .mk-order-ready-grid,
  .mk-order-confirmation-steps,
  .woocommerce-order-received .woocommerce-order-overview,
  .mk-checkout-confidence-grid {
    grid-template-columns: 1fr;
  }

  .mk-internal-card-grid,
  .mk-internal-timeline {
    grid-template-columns: 1fr;
  }

  .mk-internal-visual {
    min-height: 340px;
  }

  .mk-copy-box {
    align-items: stretch;
    flex-direction: column;
  }

  .mk-post-card-featured {
    grid-column: auto;
  }

  .mk-cockpit-preview {
    min-height: 390px;
  }

  .mk-chart-window {
    min-height: 330px;
  }

  .mk-panel-mockup {
    left: 5%;
    width: 68%;
  }

  .mk-live-hud,
  .mk-license-visual {
    right: 5%;
    width: 158px;
  }

  .mk-live-hud strong {
    font-size: 1.65rem;
  }

  .mk-footer-grid {
    grid-template-columns: 1fr;
  }

  .mk-footer-bottom {
    display: grid;
  }

  .mk-button-row,
  .mk-hero-actions,
  .mk-section-actions {
    align-items: stretch;
  }

  .mk-glass-button {
    width: 100%;
  }

  .mk-comparison-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .mk-search-form {
    display: grid;
  }

  .mk-floating-support {
    display: none;
  }
}

@media (max-width: 430px) {
  body.mk-theme-shell {
    font-size: 16px;
  }

  .mk-card {
    padding: 20px;
    border-radius: 20px;
  }

  .mk-demo-actions {
    grid-template-columns: 1fr;
  }

  .mk-license-card-visual {
    grid-template-columns: 1fr;
  }

  .mk-mobile-sticky-cta {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
}

/* AI final mobile compression: preserve account/cart access, keep the floating
   support affordance above sticky CTAs, and suppress the legacy demo float on
   narrow phones where it competes with checkout/account actions. */
@media (max-width: 760px) {
  .mk-header-shell {
    gap: 8px;
    padding: 8px 10px;
  }

  .mk-brand-mark {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
  }

  .mk-account-link,
  .mk-cart-link {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .mk-floating-support {
    display: block;
    right: 10px;
    bottom: 78px;
    z-index: 996;
  }

  .mk-floating-support a {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 16px 36px -18px rgba(0, 229, 255, 0.72);
  }
}

@media (max-width: 430px) {
  .mk-header-shell {
    gap: 6px;
    padding: 7px 8px;
  }

  .mk-brand-mark {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 13px;
  }

  .mk-account-link,
  .mk-cart-link {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .mkpt-rb-floating-card {
    display: none !important;
  }
}

/* AI live mobile popup guard: the launch offer competes with cookie consent,
   cart/account icons, and sticky CTAs on phones. Keep it desktop-only even
   when an older stored option has the popup enabled. */
@media (max-width: 760px) {
  .mk-site-popup {
    display: none !important;
  }
}