/* MiCursoX desktop foundation
   Mobile remains the source of truth. These rules only apply on larger viewports. */

@media (min-width: 768px) {
  html { scroll-behavior: smooth; }
  body { min-width: 0; }

  /* Shared form and modal ergonomics */
  input, select, textarea, button { font-size: 16px; }
  .modal, .modalCard, .cardModal, [role="dialog"] {
    max-width: min(680px, calc(100vw - 64px));
    margin-inline: auto;
  }

  /* Login */
  body.authPremium .loginPageShell {
    width: min(1180px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 40px 0;
    display: grid;
    align-items: center;
  }
  body.authPremium .loginPanel {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, .9fr);
    overflow: hidden;
    border-radius: 32px;
  }
  body.authPremium .loginVisual {
    min-height: 680px;
    display: block;
  }
  body.authPremium .loginContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
  }
  body.authPremium .authCard { width: 100%; }
  body.authPremium .loginBack { position: fixed; top: 28px; left: max(28px, calc((100vw - 1180px)/2)); }

  /* Onboarding shell */
  body.onboardingPremium .onbAppHeader .topbar {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 82px;
  }
  body.onboardingPremium > main.container,
  body.onboardingPremium .onbModeWrap.container {
    width: min(1040px, calc(100% - 48px));
    max-width: 1040px;
    margin-inline: auto;
  }
  body.onboardingPremium #app {
    padding-top: 28px;
    padding-bottom: 56px;
  }
  body.onboardingPremium #app > .card,
  body.onboardingPremium #app > section,
  body.onboardingPremium #app > form {
    max-width: 920px;
    margin-inline: auto;
  }
  body.onboardingPremium .onbMenuDropdown {
    right: 0;
    left: auto;
    min-width: 260px;
  }
}

@media (min-width: 1024px) {
  /* Landing */
  .landing-shell { overflow-x: clip; }
  .landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .landing-nav,
  .hero,
  .mx-trust,
  .access-section,
  .features-section,
  .highlight-card,
  .mx-resource-section,
  .footer {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto;
  }
  .landing-nav { min-height: 84px; }
  .landing-nav .brand img { width: clamp(180px, 18vw, 240px); }
  .landing-nav .nav-links { display: flex; }
  .landing-nav .menu-btn,
  .landing-header .mobile-menu { display: none !important; }

  .hero.mx-hero {
    min-height: 680px;
    grid-template-columns: minmax(0, 1fr) minmax(460px, .92fr);
    gap: 64px;
    align-items: center;
    padding-block: 72px 56px;
  }
  .mx-hero-copy h1 { max-width: 720px; font-size: clamp(56px, 5.4vw, 82px); line-height: .98; }
  .mx-lead { max-width: 670px; font-size: 21px; }
  .mx-hero-media { min-height: 590px; }
  .mx-family { width: 100%; max-height: 610px; object-fit: cover; }
  .mx-market-card { max-width: 520px; }

  .mx-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .access-section { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .features-section { padding-block: 76px; }
  .highlight-card { min-height: 390px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
  .whatsapp-highlight { grid-template-columns: auto minmax(0, 1fr) minmax(320px, .75fr); }
  .mx-resource-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer { grid-template-columns: 1.35fr repeat(3, minmax(150px, .7fr)); gap: 48px; padding-block: 64px 40px; }
  .footer-bottom { grid-column: 1 / -1; }

  /* Desktop landing polish. Explicit !important only overrides existing desktop-level brand rules. */
  .landing-header .landing-nav {
    min-height: 92px !important;
    padding: 12px 0 !important;
    gap: 34px !important;
  }
  .landing-header .micursox-brand img {
    width: clamp(190px, 16vw, 225px) !important;
    max-height: 62px !important;
  }
  .landing-nav .nav-links {
    gap: clamp(28px, 3vw, 44px) !important;
  }
  .landing-nav .nav-links a {
    font-size: 16px !important;
  }
  .landing-nav .nav-cta {
    min-height: 54px;
    padding-inline: 30px !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .landing-nav .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(91,33,182,.30) !important;
    filter: brightness(1.03);
  }

  .hero.mx-hero {
    width: min(1180px, calc(100% - 64px)) !important;
    max-width: 1180px !important;
    min-height: 720px !important;
    padding: 76px 0 82px !important;
    overflow: visible !important;
    background: linear-gradient(90deg,#fff 0%,#fff 44%,#f7f5ff 100%) !important;
  }
  .mx-hero-copy {
    padding: 24px 0 34px 26px !important;
    justify-content: center;
  }
  .mx-hero h1 {
    font-size: clamp(58px, 5.2vw, 78px) !important;
    line-height: 1.01 !important;
    margin-bottom: 26px !important;
  }
  .mx-lead {
    max-width: 610px;
    margin-bottom: 34px;
    line-height: 1.58;
  }
  .mx-benefits {
    gap: 24px;
    margin-bottom: 38px;
  }
  .mx-benefit {
    grid-template-columns: 54px 1fr;
    gap: 13px;
    align-items: start;
  }
  .mx-benefit-icon {
    width: 52px;
    height: 52px;
    font-size: 23px;
  }
  .mx-benefit strong {
    font-size: 15px;
    line-height: 1.25;
  }
  .mx-benefit small {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
  }
  .mx-actions {
    gap: 22px;
  }
  .mx-primary,
  .mx-secondary {
    min-height: 64px;
    padding-inline: 34px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .mx-primary:hover,
  .mx-secondary:hover {
    transform: translateY(-2px);
  }
  .mx-primary:hover {
    box-shadow: 0 20px 38px rgba(91,33,182,.30);
  }
  .mx-secondary:hover {
    border-color: #b9b5e8;
    box-shadow: 0 12px 28px rgba(31,24,91,.10);
  }

  .mx-hero-media {
    min-height: 640px !important;
    align-self: center;
    overflow: visible;
  }
  .mx-family {
    height: 640px !important;
    max-height: none !important;
    border-radius: 0 0 0 0;
    object-position: center center;
  }
  .mx-market-card {
    left: 5%;
    right: 2%;
    bottom: 28px;
    max-width: none;
    min-height: 150px;
    padding: 20px 22px;
    grid-template-columns: 82px minmax(0,1fr) 155px;
    gap: 20px;
  }
  .mx-market-icon {
    width: 78px;
    height: 78px;
  }
  .mx-market-card h2 { font-size: 26px; }
  .mx-market-card p { font-size: 15px; }
  .mx-market-card img {
    width: 155px;
    height: 96px;
  }

  .footer {
    align-items: start;
  }
  .footer > div:not(.footer-bottom) {
    min-width: 0;
  }
  .footer h2 {
    min-height: 24px;
  }
  .footer .social-links {
    margin-top: 20px;
  }

  /* Login */
  body.authPremium .loginPanel { box-shadow: 0 32px 90px rgba(15,23,42,.16); }

  /* Onboarding cards and forms */
  body.onboardingPremium #app .card {
    border-radius: 28px;
  }
  body.onboardingPremium #app form,
  body.onboardingPremium #app .formGrid,
  body.onboardingPremium #app .onbFormGrid {
    max-width: 860px;
  }
  body.onboardingPremium #app .formGrid,
  body.onboardingPremium #app .onbFormGrid,
  body.onboardingPremium #app .twoCol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
  }
  body.onboardingPremium #app .actions,
  body.onboardingPremium #app .buttonRow {
    justify-content: flex-end;
  }
}

@media (min-width: 1440px) {
  .landing-nav,
  .hero,
  .mx-trust,
  .access-section,
  .features-section,
  .highlight-card,
  .mx-resource-section,
  .footer { width: min(1280px, calc(100% - 96px)); }

  .hero.mx-hero {
    width: min(1280px, calc(100% - 96px)) !important;
    max-width: 1280px !important;
    grid-template-columns: minmax(0, 1fr) minmax(520px, .95fr) !important;
    gap: 76px !important;
  }
  .mx-hero-copy {
    padding-left: 34px !important;
  }

  body.onboardingPremium > main.container,
  body.onboardingPremium .onbModeWrap.container { width: min(1120px, calc(100% - 96px)); max-width: 1120px; }
}