/* UX38: CSS-only responsive correction based on real-device QA screenshots.
   Protected: pricing, Core, Graph, catalog, proposal state, multiproduct, persistence and WhatsApp. */
@media (max-width:760px){
  html,body{width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  body .shell,body .main,body #homeHero,body #realSection,body #homeGraph,body #inspiracion{min-width:0!important;max-width:100%!important}

  /* Brand: never upscale the legacy 128px raster logo on mobile. The canonical CSS wordmark stays sharp. */
  .top .brand{min-width:0!important;max-width:128px!important;overflow:hidden!important}
  .top .brandword{width:92px!important;min-width:92px!important;height:40px!important;overflow:visible!important;background:transparent!important}
  .top .brandword img{display:none!important}
  .top .brandword:before{font-size:23px!important;letter-spacing:.22em!important;white-space:nowrap!important}
  .top .brandword:after{font-size:6px!important;letter-spacing:.19em!important;white-space:nowrap!important}

  /* Three main routes: reserve a real column for the CTA arrow and never let copy enter it. */
  body.ux24-home #homeHero .ux24-route-grid{grid-template-columns:1fr!important;gap:10px!important;padding:0 12px 14px!important}
  body.ux24-home #homeHero .ux24-route{
    width:100%!important;min-width:0!important;grid-template-columns:48px minmax(0,1fr) 44px!important;
    gap:12px!important;align-items:center!important;padding:13px 12px!important;min-height:104px!important
  }
  body.ux24-home #homeHero .ux24-route>span{min-width:0!important;padding-right:2px!important;overflow:hidden!important}
  body.ux24-home #homeHero .ux24-route>span b{font-size:18px!important;line-height:1.12!important;white-space:normal!important;overflow-wrap:break-word!important}
  body.ux24-home #homeHero .ux24-route>span small{font-size:11px!important;line-height:1.42!important;white-space:normal!important;overflow-wrap:break-word!important}
  body.ux24-home #homeHero .ux24-route>em{width:42px!important;min-width:42px!important;height:42px!important;justify-self:end!important;position:static!important;margin:0!important;transform:none!important}
  body.ux24-home #homeHero .ux24-route-icon{width:46px!important;min-width:46px!important;height:46px!important}

  /* Real cases: fit every control into the viewport instead of showing half a chip/card. */
  #realSection .real-shell,#realSection .real-head,#realSection .real-toolbar,#realSection .real-story-grid{min-width:0!important;max-width:100%!important}
  #realSection .real-head h2{font-size:clamp(29px,8.6vw,36px)!important;line-height:1.03!important;max-width:100%!important;overflow-wrap:break-word!important}
  #realSection .real-depth{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;margin-right:0!important}
  #realSection .real-depth-item{min-width:0!important;flex:none!important;padding:10px!important}
  #realSection .real-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;flex-wrap:wrap!important;margin-right:0!important;padding-right:0!important}
  #realSection .real-filter{min-width:0!important;width:100%!important;justify-content:center!important;white-space:normal!important;text-align:center!important;padding:9px 10px!important}
  #realSection .real-all{width:100%!important;margin-top:10px!important}
  #realSection .real-case-stack{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;margin-right:0!important;padding-right:0!important}
  #realSection .real-case-card{width:100%!important;min-width:0!important;flex:none!important;min-height:230px!important}
  #realSection .real-library-grid{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;margin-right:0!important;padding-right:0!important}
  #realSection .real-library-card{width:100%!important;min-width:0!important;flex:none!important;height:220px!important}
  #realSection{padding-bottom:112px!important}

  /* Explore solutions: no page-level horizontal clipping, no half-visible title/filter/card. */
  #inspiracion.ux32-solutions{width:100%!important;max-width:100%!important;overflow:hidden!important;padding:20px 12px 112px!important}
  #inspiracion .ux32-solutions-head{display:block!important;min-width:0!important}
  #inspiracion .ux32-solutions-head h2{font-size:clamp(29px,8.7vw,36px)!important;line-height:1.04!important;max-width:100%!important;width:100%!important;text-wrap:balance!important;overflow-wrap:break-word!important}
  #inspiracion .ux32-solutions-head p{max-width:100%!important;font-size:11.5px!important;line-height:1.48!important}
  #inspiracion .ux32-solution-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;flex-wrap:wrap!important;margin:14px 0 16px!important;padding:0!important}
  #inspiracion .ux32-filter{width:100%!important;min-width:0!important;justify-content:center!important;white-space:normal!important;text-align:center!important;padding:8px 10px!important;min-height:46px!important}
  #inspiracion .ux32-solution-grid{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto!important;gap:12px!important;overflow:visible!important;margin:0!important;padding:0!important}
  #inspiracion .ux32-card,#inspiracion .ux32-card.featured{width:100%!important;max-width:100%!important;min-width:0!important;flex:none!important;grid-column:auto!important;grid-row:auto!important;min-height:390px!important;scroll-snap-align:none!important}
  #inspiracion .ux32-card.featured .ux32-card-copy,#inspiracion .ux32-card-copy{left:15px!important;right:64px!important;max-width:calc(100% - 79px)!important;bottom:15px!important}
  #inspiracion .ux32-card h3,#inspiracion .ux32-card.featured h3{font-size:25px!important;line-height:1.04!important;overflow-wrap:break-word!important}
  #inspiracion .ux32-card p,#inspiracion .ux32-card.featured p{font-size:10.5px!important;line-height:1.45!important}
  #inspiracion .ux32-solution-flow{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;margin:14px 0 0!important;padding:0!important;border-radius:16px!important}
  #inspiracion .ux32-flow-intro,#inspiracion .ux32-flow-step,#inspiracion .ux32-flow-cta{width:100%!important;min-width:0!important;flex:none!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;padding:16px!important}
  #inspiracion .ux32-flow-cta{border-bottom:0!important}

  /* Guided solution: hard reset the desktop two-column focus card on mobile. */
  #homeGraph.ux29-guided{width:100%!important;max-width:100%!important;overflow:hidden!important;padding:20px 12px 112px!important;margin-left:0!important;margin-right:0!important}
  #homeGraph.ux29-guided .graph-head,#homeGraph.ux29-guided .journey-panel,#homeGraph.ux29-guided .journey-intro,#homeGraph.ux29-guided .journey-focus,#homeGraph.ux29-guided .journey-stages{min-width:0!important;max-width:100%!important}
  #homeGraph.ux29-guided .graph-head h2{font-size:clamp(29px,8.7vw,36px)!important;max-width:100%!important;line-height:1.03!important;overflow-wrap:break-word!important}
  #homeGraph.ux29-guided .journey-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;flex-wrap:wrap!important;padding:0!important}
  #homeGraph.ux29-guided .journey-tab{width:100%!important;min-width:0!important;white-space:normal!important;text-align:center!important;padding:8px 9px!important;min-height:46px!important}
  #homeGraph.ux29-guided .journey-intro{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  #homeGraph.ux29-guided .journey-intro>div{min-width:0!important;width:100%!important}
  #homeGraph.ux29-guided .journey-intro h3{font-size:clamp(23px,7.1vw,30px)!important;line-height:1.08!important;overflow-wrap:break-word!important}
  #homeGraph.ux29-guided .journey-intro p{font-size:12px!important;line-height:1.5!important;max-width:100%!important}
  #homeGraph.ux29-guided .journey-cta{width:100%!important;max-width:100%!important;white-space:normal!important;min-height:52px!important;padding:10px 16px!important}
  #homeGraph.ux29-guided .journey-order{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important;gap:7px!important}
  #homeGraph.ux29-guided .journey-order span:not(.arrow){flex:0 1 auto!important;min-width:0!important}
  #homeGraph.ux29-guided .journey-focus{display:block!important;grid-template-columns:none!important;width:100%!important;overflow:hidden!important}
  #homeGraph.ux29-guided .ux29-focus-media{position:relative!important;width:100%!important;height:220px!important;min-height:220px!important;max-height:220px!important;overflow:hidden!important}
  #homeGraph.ux29-guided .ux29-focus-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  #homeGraph.ux29-guided .ux29-focus-copy{display:block!important;width:100%!important;min-width:0!important;padding:16px!important;overflow:hidden!important}
  #homeGraph.ux29-guided .ux29-focus-copy h4{font-size:23px!important;line-height:1.08!important;max-width:100%!important;overflow-wrap:break-word!important}
  #homeGraph.ux29-guided .ux29-focus-copy p{max-width:100%!important;overflow-wrap:break-word!important}
  #homeGraph.ux29-guided .ux29-bundle-products{width:100%!important;max-width:100%!important}
  #homeGraph.ux29-guided .ux29-bundle-products span{max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important}
  #homeGraph.ux29-guided .ux29-focus-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  #homeGraph.ux29-guided .ux29-focus-actions button{width:100%!important;white-space:normal!important;padding:10px 12px!important}
  #homeGraph.ux29-guided .journey-stages{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  #homeGraph.ux29-guided .journey-stage{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;width:100%!important;min-width:0!important;min-height:130px!important}
  #homeGraph.ux29-guided .ux29-stage-media{width:104px!important;min-width:104px!important;height:100%!important;min-height:130px!important}
  #homeGraph.ux29-guided .ux29-stage-body{min-width:0!important;overflow:hidden!important}
  #homeGraph.ux29-guided .journey-products{max-width:100%!important}
  #homeGraph.ux29-guided .journey-product{max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important}
  #homeGraph.ux29-guided .process-rail{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;padding:0!important}
  #homeGraph.ux29-guided .process-step{width:100%!important;min-width:0!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.08)!important}
  #homeGraph.ux29-guided .process-step:first-child{border-top:0!important}
  #homeGraph.ux29-guided .process-step:not(:last-child):after{content:'↓'!important;right:12px!important;left:auto!important;top:auto!important;bottom:-8px!important}

  /* Bottom nav: compact, safe-area aware and no accidental width inflation. */
  .nemi-mobile-nav{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;max-width:calc(100vw - 16px)!important;min-width:0!important;padding:5px!important;border-radius:16px!important}
  .nemi-mobile-nav button{min-width:0!important;min-height:48px!important;padding:5px 2px!important;font-size:9px!important;overflow:hidden!important}
}
@media (max-width:390px){
  body.ux24-home #homeHero .ux24-route{grid-template-columns:44px minmax(0,1fr) 40px!important;gap:9px!important;padding:12px 10px!important}
  body.ux24-home #homeHero .ux24-route-icon{width:42px!important;min-width:42px!important;height:42px!important}
  body.ux24-home #homeHero .ux24-route>em{width:38px!important;min-width:38px!important;height:38px!important}
  body.ux24-home #homeHero .ux24-route>span b{font-size:16px!important}
  body.ux24-home #homeHero .ux24-route>span small{font-size:10px!important}
  #realSection .real-depth,#realSection .real-filters,#inspiracion .ux32-solution-filters,#homeGraph.ux29-guided .journey-tabs{grid-template-columns:1fr!important}
  #homeGraph.ux29-guided .journey-stage{grid-template-columns:92px minmax(0,1fr)!important}
  #homeGraph.ux29-guided .ux29-stage-media{width:92px!important;min-width:92px!important}
}