/* Mobile-only override layer loaded last to stabilize UX on narrow screens */
@media (max-width: 980px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.mc-page .mc-main,
  body.marketing-page main,
  body.marketing-page .mc-main {
    padding-top: 66px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  body.mc-page .mc-container,
  body.marketing-page .wrap,
  #header .header-container {
    width: min(100% - 24px, 1510px) !important;
    max-width: 1510px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile nav: closed by default, expanded only on toggle */
  #header {
    min-height: 66px !important;
    height: auto !important;
    overflow: visible !important;
  }

  #header .header-container {
    min-height: 66px !important;
    height: auto !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  #header .logo {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }

  #header .logo img {
    width: 34px !important;
    height: 34px !important;
  }

  #header .logo .sitename {
    font-size: 1.03rem !important;
    white-space: nowrap !important;
  }

  #header .mobile-nav-toggle {
    display: grid !important;
    place-items: center !important;
    margin-left: auto !important;
    flex: 0 0 40px !important;
  }

  #header .navmenu {
    display: none !important;
    order: 4 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  body.mc-menu-open #header .navmenu,
  #header .navmenu.open {
    display: block !important;
  }

  #header .navmenu ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px 0 2px !important;
    margin: 0 !important;
  }

  #header .navmenu a {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 12px !important;
  }

  #header .header-actions {
    display: none !important;
    order: 5 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 6px 0 4px !important;
  }

  body.mc-menu-open #header .header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #header .header-actions .btn {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 0.86rem !important;
  }

  /* Mobile layout spacing */
  body.marketing-page .hero-inner,
  body.marketing-page .section,
  body.marketing-page .mc-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.marketing-page .hero-copy,
  body.marketing-page .hero-product,
  body.marketing-page .section-title,
  body.marketing-page .project-story,
  body.marketing-page .gallery-panel,
  body.marketing-page .gallery-newsletter,
  body.marketing-page .sales-pricing-grid,
  body.marketing-page .faq-list,
  body.marketing-page .contact-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Project tabs + roadmap don't clip on phone */
  .project-title-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .project-tabs {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .project-tabs button {
    min-width: 110px !important;
  }

  .roadmap-path {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 2px 12px !important;
    min-height: 0 !important;
    max-width: 100% !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .roadmap-path svg {
    display: none !important;
  }

  .roadmap-path article {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 min(220px, 72vw) !important;
    width: min(220px, 72vw) !important;
    max-width: min(220px, 72vw) !important;
    scroll-snap-align: start !important;
  }

  /* Product cards + tooltips on mobile */
  .plan-card h3,
  .mc-price-card-laa h3,
  .mc-price-card-pro h3 {
    margin-bottom: 6px !important;
  }

  .old-price,
  .mc-old-price {
    margin-top: 2px !important;
  }

  .info-dot {
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .mc-product-tip {
    width: min(320px, calc(100vw - 24px)) !important;
    z-index: 9999 !important;
  }

  /* Pricing + download + dashboard viewport safety */
  .mc-billing-mode,
  .mc-download-hero-pro,
  .mc-download-step-grid,
  .mc-download-privacy-grid,
  .mc-profile-layout,
  .mc-settings-stack,
  .mc-dashboard-pane,
  .mc-profile-sidebar,
  .mc-profile-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mc-plan-grid,
  .sales-pricing-grid,
  .mc-download-step-grid,
  .mc-download-privacy-grid,
  .mc-profile-layout {
    grid-template-columns: 1fr !important;
  }

  .mc-table-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  .mc-table {
    min-width: 560px !important;
  }

  .mc-code,
  .mc-break {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .mc-dashboard-pane,
  .mc-settings-form,
  .mc-subscription-item,
  .mc-sub-body,
  .mc-kv {
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  body.mc-page .mc-container,
  body.marketing-page .wrap,
  #header .header-container {
    width: min(100% - 18px, 1510px) !important;
  }

  .project-tabs button {
    min-width: 96px !important;
    font-size: 0.82rem !important;
    padding: 9px 10px !important;
  }

  .roadmap-path article {
    flex-basis: min(200px, 72vw) !important;
    width: min(200px, 72vw) !important;
    max-width: min(200px, 72vw) !important;
  }

  .mc-table {
    min-width: 520px !important;
  }
}

/* Mobile QA hard lock: loaded last, affects phones/tablets only. */
@media (max-width: 980px) {
  :root {
    --mc-mobile-gutter: 18px;
    --mc-mobile-header: 66px;
  }

  html,
  body,
  body.mc-page,
  body.marketing-page {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #header,
  body.mc-page #header,
  body.marketing-page #header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
    height: auto !important;
    min-height: var(--mc-mobile-header) !important;
    overflow: visible !important;
  }

  #header .header-container,
  body.mc-page #header .header-container,
  body.marketing-page #header .header-container {
    width: calc(100vw - (var(--mc-mobile-gutter) * 2)) !important;
    max-width: calc(100vw - (var(--mc-mobile-gutter) * 2)) !important;
    min-width: 0 !important;
    min-height: var(--mc-mobile-header) !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #header .logo,
  body.mc-page #header .logo,
  body.marketing-page #header .logo {
    flex: 1 1 calc(100% - 52px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 52px) !important;
  }

  #header .logo img {
    width: 34px !important;
    height: 34px !important;
  }

  #header .logo .sitename,
  body.mc-page #header .logo .sitename,
  body.marketing-page #header .logo .sitename {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.04rem !important;
  }

  #header .mobile-nav-toggle,
  body.mc-page #header .mobile-nav-toggle,
  body.marketing-page #header .mobile-nav-toggle {
    display: grid !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin-left: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #header .navmenu,
  body.mc-page #header .navmenu,
  body.marketing-page #header .navmenu,
  #header .header-actions,
  body.mc-page #header .header-actions,
  body.marketing-page #header .header-actions {
    display: none !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: 4 !important;
  }

  body.mc-menu-open #header .navmenu,
  #header .navmenu.open {
    display: block !important;
  }

  body.mc-menu-open #header .header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    order: 5 !important;
  }

  #header .navmenu ul,
  body.mc-page #header .navmenu ul,
  body.marketing-page #header .navmenu ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }

  #header .navmenu li,
  #header .navmenu a,
  body.mc-page #header .navmenu li,
  body.mc-page #header .navmenu a,
  body.marketing-page #header .navmenu li,
  body.marketing-page #header .navmenu a {
    width: 100% !important;
    max-width: 100% !important;
  }

  #header .navmenu a,
  #header .header-actions .btn {
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #header .header-actions .btn {
    min-height: 42px !important;
    font-size: 0.86rem !important;
  }

  body.mc-page .mc-main,
  body.marketing-page .mc-main,
  body.marketing-page main {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: var(--mc-mobile-gutter) !important;
    padding-right: var(--mc-mobile-gutter) !important;
    overflow-x: hidden !important;
  }

  body.marketing-page .wrap,
  body.mc-page .mc-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.marketing-page .hero,
  body.marketing-page .section,
  body.marketing-page .mc-pricing-page,
  body.mc-page .mc-pricing-page,
  body.mc-page .mc-download-shell,
  body.mc-page .mc-dashboard-hero,
  body.mc-page .mc-profile-layout {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.marketing-page .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 0 !important;
  }

  body.marketing-page .hero-copy,
  body.marketing-page .hero-product,
  body.marketing-page .project-story,
  body.marketing-page .gallery-panel,
  body.marketing-page .gallery-newsletter,
  body.marketing-page .sales-pricing-grid,
  body.marketing-page .faq-list,
  body.marketing-page .contact-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.marketing-page .hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.5rem) !important;
  }

  body.marketing-page .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.marketing-page .stats-row div:last-child {
    grid-column: 1 / -1 !important;
  }

  body.marketing-page .project-title-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.marketing-page .project-tabs {
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 6px !important;
  }

  body.marketing-page .project-tabs button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 8px !important;
  }

  body.marketing-page .roadmap-path {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    min-height: 0 !important;
    padding: 12px 2px 18px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.marketing-page .roadmap-path svg {
    display: none !important;
  }

  body.marketing-page .roadmap-path article,
  body.marketing-page .roadmap-path article:first-of-type,
  body.marketing-page .roadmap-path article:last-of-type {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 72vw !important;
    width: 72vw !important;
    max-width: 260px !important;
    min-height: 190px !important;
    padding: 16px !important;
    scroll-snap-align: start !important;
  }

  body.marketing-page .plan-card,
  body.mc-page .plan-card,
  body.mc-page .mc-price-card-laa {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.marketing-page .plan-card h3,
  body.mc-page .plan-card h3 {
    margin-bottom: 2px !important;
  }

  body.marketing-page .plan-old-line,
  body.mc-page .plan-old-line,
  body.marketing-page .old-price,
  body.mc-page .old-price {
    margin-top: 0 !important;
  }

  .mc-product-tip {
    position: fixed !important;
    width: min(320px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    z-index: 10000 !important;
  }

  body.mc-page .mc-pricing-page,
  body.mc-page .mc-download-shell {
    display: grid !important;
    gap: 18px !important;
  }

  body.mc-page .mc-pricing-hero-pro,
  body.mc-page .mc-pricing-filter-card,
  body.mc-page .mc-download-hero-pro,
  body.mc-page .mc-download-steps-pro,
  body.mc-page .mc-download-privacy-grid,
  body.mc-page .mc-trust-card,
  body.mc-page .mc-dashboard-hero,
  body.mc-page .mc-profile-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.mc-page .mc-price-grid-laa,
  body.mc-page .mc-price-grid-three,
  body.mc-page .sales-pricing-grid,
  body.mc-page .mc-download-step-grid,
  body.mc-page .mc-download-privacy-grid,
  body.mc-page .mc-profile-layout,
  body.mc-page .mc-settings-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mc-page .mc-billing-mode {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.mc-page .mc-billing-mode button {
    min-width: 0 !important;
    padding: 10px 4px !important;
    font-size: .78rem !important;
  }

  body.mc-page .mc-download-hero-pro {
    grid-template-columns: 1fr !important;
    padding: 28px 18px !important;
  }

  body.mc-page .mc-download-hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(2.1rem, 12vw, 3rem) !important;
    line-height: 1.02 !important;
  }

  body.mc-page .mc-download-points-pro {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.mc-page .mc-download-primary,
  body.mc-page .mc-download-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  body.mc-page .mc-download-device {
    display: none !important;
  }

  body.mc-page .mc-dashboard-hero {
    padding: 24px 18px !important;
  }

  body.mc-page .mc-dashboard-hero .mc-stat-grid {
    grid-template-columns: 1fr !important;
  }

  body.mc-page .mc-dashboard-pane,
  body.mc-page .mc-profile-sidebar,
  body.mc-page .mc-settings-form,
  body.mc-page .mc-subscription-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.mc-page .mc-sub-head,
  body.mc-page .mc-sub-row,
  body.mc-page .mc-kv,
  body.mc-page .mc-settings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.mc-page .mc-table-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  :root {
    --mc-mobile-gutter: 14px;
  }

  body.marketing-page .plan-card {
    padding: 28px 18px !important;
  }
}

/* MC mobile final QA 2026-06-04 start */
.mc-legal-shell { width: min(1120px, calc(100vw - 32px)); margin: 0 auto 48px; }
.mc-legal-hero { padding: clamp(36px, 7vw, 76px) 0 26px; }
.mc-legal-hero h1 { margin: 8px 0 12px; font-size: clamp(2.5rem, 8vw, 5rem); line-height: .95; }
.mc-legal-hero p { max-width: 760px; color: var(--mc-muted, #c8c2b7); }
.mc-legal-list { display: grid; gap: 14px; }
.mc-legal-item { border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 22px; background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(124,255,217,.045)); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.mc-legal-item h2 { margin: 0 0 10px; font-size: 1.25rem; }
.mc-legal-item p { margin: 0; color: var(--mc-muted, #d5cfc4); line-height: 1.65; }

@media (max-width: 768px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
  body.mc-page, body.marketing-page { margin: 0 !important; padding: 0 !important; }

  #header { position: sticky !important; top: 0 !important; z-index: 9999 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #header .header-container { width: 100% !important; max-width: 100% !important; min-height: 66px !important; padding: 10px 14px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; overflow: hidden !important; }
  #header .logo { min-width: 0 !important; max-width: calc(100% - 58px) !important; }
  #header .logo h1 { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 1.08rem !important; }
  #header .mobile-nav-toggle { flex: 0 0 auto !important; margin: 0 !important; }
  #header .navmenu, #header .header-actions { display: none !important; }
  body.mc-menu-open #header .header-container { align-items: flex-start !important; flex-wrap: wrap !important; overflow: visible !important; }
  body.mc-menu-open #header .navmenu { display: block !important; order: 3 !important; width: 100% !important; max-width: 100% !important; padding: 8px 0 0 !important; margin: 0 !important; }
  body.mc-menu-open #header .navmenu ul { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
  body.mc-menu-open #header .navmenu li { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body.mc-menu-open #header .navmenu a { display: flex !important; width: 100% !important; min-height: 42px !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin: 0 !important; }
  body.mc-menu-open #header .header-actions { display: grid !important; order: 4 !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 12px 0 4px !important; margin: 0 !important; }
  body.mc-menu-open #header .header-actions .btn { width: 100% !important; max-width: 100% !important; justify-content: center !important; margin: 0 !important; }

  body.mc-page .mc-main, body.marketing-page .mc-main, body.marketing-page main { margin: 0 !important; padding-top: 16px !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  body.mc-home .mc-main, body.marketing-page.mc-home .mc-main, body.marketing-page.mc-home main { padding-top: 0 !important; }
  body.marketing-page .hero { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  body.marketing-page .hero .wrap { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body.marketing-page .hero-inner { padding: 24px 16px 28px !important; box-sizing: border-box !important; }
  body.marketing-page .section, body.marketing-page .wrap, body.mc-page .mc-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; overflow-x: hidden !important; }
  body.mc-page .mc-container { padding-top: 16px !important; padding-bottom: 28px !important; }

  body.marketing-page .project-section, body.marketing-page .project-story, body.marketing-page .roadmap-panel { max-width: 100% !important; overflow: hidden !important; }
  body.marketing-page .roadmap-path { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 14px !important; padding: 12px 16px 22px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; }
  body.marketing-page .roadmap-path article, body.marketing-page .roadmap-path article:first-of-type, body.marketing-page .roadmap-path article:last-of-type { flex: 0 0 230px !important; width: 230px !important; max-width: 230px !important; min-width: 230px !important; min-height: 176px !important; left: auto !important; top: auto !important; transform: none !important; scroll-snap-align: start !important; }

  body.mc-page .mc-pricing-page, body.mc-page .mc-download-shell, body.mc-page .mc-dashboard-shell, body.mc-page .mc-admin-shell, body.mc-page .mc-auth-card, body.mc-page .mc-profile-layout, body.mc-page .mc-dashboard-hero, body.mc-page .mc-dashboard-pane, body.mc-page .mc-profile-sidebar, body.mc-page .mc-download-hero-pro, body.mc-page .mc-download-steps-pro, body.mc-page .mc-download-privacy-grid, body.mc-page .mc-trust-card, body.mc-page .mc-pricing-hero-pro, body.mc-page .mc-pricing-filter-card, body.mc-page .mc-admin-panel, body.mc-page .mc-legal-shell { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; }
  body.mc-page .mc-auth-card { margin: 0 0 24px !important; }
  body.mc-page .mc-download-hero-pro, body.mc-page .mc-pricing-hero-pro, body.mc-page .mc-pricing-filter-card { padding-left: 18px !important; padding-right: 18px !important; }
  body.mc-page .mc-download-hero-copy h1 { font-size: clamp(2rem, 11vw, 2.75rem) !important; overflow-wrap: anywhere !important; }
  body.mc-page .mc-price-grid-laa, body.mc-page .mc-price-grid-three, body.mc-page .sales-pricing-grid, body.mc-page .mc-download-step-grid, body.mc-page .mc-download-privacy-grid, body.mc-page .mc-profile-layout, body.mc-page .mc-settings-stack, body.mc-page .mc-dashboard-grid, body.mc-page .mc-admin-grid { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; }
  body.mc-page .mc-billing-mode { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; gap: 6px !important; padding: 6px !important; }
  body.mc-page .mc-billing-mode button { min-width: 96px !important; padding: 10px 6px !important; font-size: .78rem !important; white-space: nowrap !important; }
  body.mc-page .mc-download-points-pro { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  body.mc-page .mc-download-primary, body.mc-page .mc-download-secondary { width: 100% !important; justify-content: center !important; }
  body.mc-page .mc-download-device { display: none !important; }
  body.mc-page .mc-dashboard-hero .mc-stat-grid { grid-template-columns: 1fr !important; }
  body.mc-page .mc-sub-head, body.mc-page .mc-sub-row, body.mc-page .mc-kv, body.mc-page .mc-settings-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  body.mc-page .mc-table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  body.mc-page .mc-table-wrap table, body.mc-page table.mc-data-table { min-width: 640px !important; }
  body.mc-page .mc-subscription-item, body.mc-page .mc-sub-row, body.mc-page .mc-order-row, body.mc-page .mc-kv { max-width: 100% !important; overflow-x: auto !important; overflow-wrap: anywhere !important; }
  body.mc-page .mc-settings-form input, body.mc-page .mc-auth-card input, body.mc-page .mc-admin-panel input, body.mc-page .mc-admin-panel select, body.mc-page .mc-admin-panel textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  .mc-site-footer, footer.footer { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .mc-site-footer .mc-container, .mc-site-footer .mc-footer-grid, footer.footer .wrap, footer.footer .footer-grid { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
  .mc-site-footer a, footer.footer a { overflow-wrap: anywhere !important; }
  .mc-product-tip { width: min(320px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; }
  .info-dot { touch-action: manipulation !important; }
}
@media (max-width: 420px) {
  body.marketing-page .section, body.marketing-page .wrap, body.mc-page .mc-container { padding-left: 14px !important; padding-right: 14px !important; }
  body.marketing-page .hero-inner { padding-left: 14px !important; padding-right: 14px !important; }
  body.mc-page .mc-billing-mode { gap: 5px !important; padding: 6px !important; }
  body.mc-page .mc-billing-mode button { min-width: 96px !important; font-size: .76rem !important; }
}

/* MC mobile final QA 2026-06-04 end */

/* MC mobile surgical lock 2026-06-04: spacing, clipping and narrow viewport safety */
@media (max-width: 768px) {
  :root {
    --mc-mobile-gutter: 16px;
    --mc-mobile-header: 66px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  #header,
  body.mc-page #header,
  body.marketing-page #header {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mc-mobile-header) !important;
    overflow: visible !important;
  }

  #header .header-container,
  body.mc-page #header .header-container,
  body.marketing-page #header .header-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mc-mobile-header) !important;
    padding: 10px var(--mc-mobile-gutter) !important;
    margin: 0 !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  #header .logo,
  body.mc-page #header .logo,
  body.marketing-page #header .logo {
    flex: 1 1 calc(100% - 54px) !important;
    max-width: calc(100% - 54px) !important;
    min-width: 0 !important;
  }

  #header .logo .sitename,
  body.mc-page #header .logo .sitename,
  body.marketing-page #header .logo .sitename {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #header .mobile-nav-toggle,
  body.mc-page #header .mobile-nav-toggle,
  body.marketing-page #header .mobile-nav-toggle {
    flex: 0 0 42px !important;
    margin-left: 0 !important;
  }

  body.mc-menu-open #header .navmenu,
  body.mc-menu-open #header .header-actions,
  #header .navmenu.open {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.mc-menu-open #header .navmenu a,
  body.mc-menu-open #header .header-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.mc-page .mc-main,
  body.marketing-page .mc-main,
  body.marketing-page main {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 16px 0 0 !important;
    overflow-x: clip !important;
  }

  body.mc-home .mc-main,
  body.marketing-page.mc-home .mc-main,
  body.marketing-page.mc-home main {
    padding-top: 0 !important;
  }

  body.marketing-page .section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  body.marketing-page .wrap,
  body.mc-page .mc-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mc-mobile-gutter) !important;
    padding-right: var(--mc-mobile-gutter) !important;
    overflow: visible !important;
  }

  body.marketing-page .hero {
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.marketing-page .hero .wrap,
  body.marketing-page .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.marketing-page .hero-inner {
    padding: 24px var(--mc-mobile-gutter) 30px !important;
  }

  body.marketing-page .hero .wrap.hero-inner {
    padding-left: var(--mc-mobile-gutter) !important;
    padding-right: var(--mc-mobile-gutter) !important;
  }

  body.marketing-page .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.85rem, 11.5vw, 3rem) !important;
    line-height: 1 !important;
    overflow-wrap: normal !important;
  }

  body.marketing-page .hero-copy,
  body.marketing-page .hero-product,
  body.marketing-page .project-story,
  body.marketing-page .gallery-panel,
  body.marketing-page .gallery-newsletter,
  body.marketing-page .sales-pricing-grid,
  body.marketing-page .faq-list,
  body.marketing-page .contact-grid,
  body.mc-page .mc-pricing-page,
  body.mc-page .mc-download-shell,
  body.mc-page .mc-dashboard-shell,
  body.mc-page .mc-admin-shell,
  body.mc-page .mc-auth-wrap,
  body.mc-page .mc-auth-card,
  body.mc-page .mc-profile-layout,
  body.mc-page .mc-profile-content,
  body.mc-page .mc-dashboard-hero,
  body.mc-page .mc-dashboard-pane,
  body.mc-page .mc-profile-sidebar,
  body.mc-page .mc-download-hero-pro,
  body.mc-page .mc-download-steps-pro,
  body.mc-page .mc-download-privacy-grid,
  body.mc-page .mc-trust-card,
  body.mc-page .mc-pricing-hero-pro,
  body.mc-page .mc-pricing-filter-card,
  body.mc-page .mc-admin-layout,
  body.mc-page .mc-admin-content,
  body.mc-page .mc-legal-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.mc-page .mc-pricing-page,
  body.mc-page .mc-download-shell,
  body.mc-page .mc-dashboard-shell,
  body.mc-page .mc-admin-shell,
  body.mc-page .mc-profile-layout,
  body.mc-page .mc-admin-layout,
  body.mc-page .mc-download-privacy-grid,
  body.mc-page .mc-pricing-filter-card,
  body.mc-page .mc-trust-card,
  body.marketing-page .pricing-preview-grid,
  body.marketing-page .sales-pricing-grid,
  body.marketing-page .project-section,
  body.marketing-page .project-story {
    overflow: visible !important;
  }

  body.mc-page .mc-card,
  body.mc-page .plan-card,
  body.marketing-page .plan-card,
  body.mc-page .mc-price-card-laa,
  body.mc-page .mc-price-card-pro {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.marketing-page .roadmap-path {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 12px var(--mc-mobile-gutter) 22px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
  }

  body.marketing-page .project-section .roadmap-path {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.marketing-page .roadmap-path article,
  body.marketing-page .roadmap-path article:first-of-type,
  body.marketing-page .roadmap-path article:last-of-type {
    flex: 0 0 min(230px, 78vw) !important;
    width: min(230px, 78vw) !important;
    min-width: min(230px, 78vw) !important;
    max-width: min(230px, 78vw) !important;
  }

  body.mc-page .mc-price-grid-laa,
  body.mc-page .mc-price-grid-three,
  body.mc-page .sales-pricing-grid,
  body.mc-page .mc-download-step-grid,
  body.mc-page .mc-download-privacy-grid,
  body.mc-page .mc-profile-layout,
  body.mc-page .mc-settings-stack,
  body.mc-page .mc-dashboard-grid,
  body.mc-page .mc-admin-grid,
  body.mc-page .mc-admin-layout,
  body.marketing-page .sales-pricing-grid,
  body.marketing-page .pricing-preview-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.mc-page .mc-billing-mode {
    display: grid !important;
    grid-template-columns: minmax(88px, 1.35fr) minmax(74px, 1fr) minmax(74px, 1fr) !important;
    gap: 5px !important;
    padding: 6px !important;
    width: min(326px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.mc-page .mc-pricing-storefront > .mc-billing-mode {
    display: grid !important;
    grid-template-columns: minmax(108px, 1.4fr) minmax(78px, 1fr) minmax(78px, 1fr) !important;
    width: min(342px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    justify-content: stretch !important;
  }

  body.mc-page .mc-billing-mode button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 4px !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.mc-page .mc-download-hero-pro,
  body.mc-page .mc-pricing-hero-pro,
  body.mc-page .mc-pricing-filter-card {
    padding-left: var(--mc-mobile-gutter) !important;
    padding-right: var(--mc-mobile-gutter) !important;
  }

  body.mc-page .mc-download-primary,
  body.mc-page .mc-download-secondary,
  body.mc-page .mc-btn,
  body.mc-page .btn,
  body.marketing-page .btn {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.mc-page .mc-download-primary,
  body.mc-page .mc-download-secondary {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body.mc-page .mc-download-device {
    display: none !important;
  }

  body.mc-page .mc-auth-wrap .mc-card,
  body.mc-page .mc-auth-wrap h1 {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body.mc-page .mc-auth-wrap .mc-card {
    margin: 0 0 24px !important;
  }

  body.mc-page .mc-form-row,
  body.mc-page .mc-legal-check,
  body.mc-page .mc-remember-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mc-page .mc-input,
  body.mc-page .mc-select,
  body.mc-page textarea,
  body.mc-page input,
  body.mc-page select {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.mc-page .mc-subscription-item summary,
  body.mc-page .mc-sub-head,
  body.mc-page .mc-sub-row,
  body.mc-page .mc-kv,
  body.mc-page .mc-settings-grid,
  body.mc-page .mc-inline-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.mc-page .mc-subscription-item .mc-sub-meta {
    margin-left: 0 !important;
    text-align: left !important;
  }

  body.mc-page .mc-code,
  body.mc-page .mc-break,
  body.mc-page .mc-subscription-item,
  body.mc-page .mc-sub-body,
  body.mc-page .mc-sub-row,
  body.mc-page .mc-order-row,
  body.mc-page .mc-kv,
  body.mc-page .mc-kv > *,
  body.mc-page .mc-table td {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.mc-page .mc-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.mc-page .mc-table-wrap table,
  body.mc-page table.mc-table,
  body.mc-page table.mc-data-table {
    width: max-content !important;
    min-width: 560px !important;
    max-width: none !important;
  }

  .mc-site-footer,
  footer.footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .mc-site-footer .mc-container,
  .mc-site-footer .mc-footer-grid,
  footer.footer .wrap,
  footer.footer .footer-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mc-mobile-gutter) !important;
    padding-right: var(--mc-mobile-gutter) !important;
  }
}

@media (max-width: 360px) {
  :root {
    --mc-mobile-gutter: 14px;
  }

  body.mc-page .mc-billing-mode button {
    font-size: .73rem !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* MC nav final lock 2026-06-04: must stay after all mobile overrides */
@media (max-width: 1180px) {
  :root {
    --mc-mobile-header: 74px;
  }

  #header,
  body.mc-page #header,
  body.marketing-page #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mc-mobile-header) !important;
    overflow: visible !important;
  }

  #header .mobile-nav-toggle,
  body.mc-page #header .mobile-nav-toggle,
  body.marketing-page #header .mobile-nav-toggle {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
  }

  #header .navmenu,
  body.mc-page #header .navmenu,
  body.marketing-page #header .navmenu,
  #header .header-actions,
  body.mc-page #header .header-actions,
  body.marketing-page #header .header-actions {
    display: none !important;
  }

  body.mc-menu-open #header .navmenu,
  body.mc-menu-open #header .navmenu.open,
  #header .navmenu.open {
    display: block !important;
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
  }

  body.mc-menu-open #header .navmenu ul,
  body.mc-page.mc-menu-open #header .navmenu ul,
  body.marketing-page.mc-menu-open #header .navmenu ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.mc-menu-open #header .navmenu li,
  body.mc-menu-open #header .navmenu a {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body.mc-menu-open #header .navmenu a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
  }

  body.mc-menu-open #header .header-actions {
    display: grid !important;
    order: 4 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 4px !important;
    margin: 0 !important;
  }

  body.mc-menu-open #header .header-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.mc-page .mc-main,
  body.mc-page main,
  body.marketing-page:not(.mc-home) .mc-main,
  body.marketing-page:not(.mc-home) main {
    padding-top: var(--mc-mobile-header) !important;
  }

  body.marketing-page.mc-home .mc-main,
  body.marketing-page.mc-home main {
    padding-top: 0 !important;
  }

  body.marketing-page.mc-home .hero {
    padding-top: var(--mc-mobile-header) !important;
  }

  body.marketing-page.mc-home .hero .wrap.hero-inner {
    padding-top: 24px !important;
  }
}

/* MC nav final v2 2026-06-04: restore hero title breathing room and center active Home */
@media (max-width: 1180px) {
  :root {
    --mc-mobile-header: 74px;
  }

  #header .header-container,
  body.mc-page #header .header-container,
  body.marketing-page #header .header-container {
    min-height: var(--mc-mobile-header) !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  body.marketing-page.mc-home .hero,
  body.marketing-page.mc-home #hero.hero {
    padding-top: calc(var(--mc-mobile-header) + 22px) !important;
  }

  body.marketing-page.mc-home .hero .wrap.hero-inner,
  body.marketing-page.mc-home #hero .wrap.hero-inner {
    padding-top: 16px !important;
  }

  body.marketing-page.mc-home .hero h1,
  body.marketing-page.mc-home #hero h1 {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    transform: none !important;
  }

  body.mc-menu-open #header .navmenu li,
  body.mc-page.mc-menu-open #header .navmenu li,
  body.marketing-page.mc-menu-open #header .navmenu li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.mc-menu-open #header .navmenu a,
  body.mc-menu-open #header .navmenu a.active,
  body.mc-menu-open #header .navmenu a.active:focus,
  body.mc-page.mc-menu-open #header .navmenu a,
  body.mc-page.mc-menu-open #header .navmenu a.active,
  body.marketing-page.mc-menu-open #header .navmenu a,
  body.marketing-page.mc-menu-open #header .navmenu a.active {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    text-align: center !important;
    transform: none !important;
  }
}