/* =========================================================
   V634 — MOBILE RESPONSIVE / IOS SAFARI SAFE LAYOUT
   Scope: client/public/party pages only. No ERP business logic.
   ========================================================= */

@media (max-width: 760px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body{
    position:relative;
    box-sizing:border-box!important;
    padding-left:env(safe-area-inset-left,0)!important;
    padding-right:env(safe-area-inset-right,0)!important;
  }
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,canvas{max-width:100%}

  /* ----- Party portal top header: always fit one mobile viewport ----- */
  .v199-topbar{
    width:100%!important;
    max-width:100vw!important;
    overflow:hidden!important;
  }
  .v199-top-main{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    min-height:64px!important;
    padding:7px max(9px,env(safe-area-inset-right,0)) 7px max(9px,env(safe-area-inset-left,0))!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  .v199-center-info{display:none!important}
  .v199-brand{
    min-width:0!important;
    max-width:150px!important;
    overflow:hidden!important;
  }
  .v199-brand.v474-mantra-brand{gap:7px!important}
  .v199-brand.v474-mantra-brand .brandmark{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
  .v199-brand.v474-mantra-brand .v474-mantra-wordmark{
    width:82px!important;
    height:40px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .v199-account{
    min-width:0!important;
    max-width:106px!important;
    gap:5px!important;
    padding:4px 5px!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }
  .v199-account-copy{display:none!important}
  .v199-avatar{
    display:grid!important;
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
  }
  .v199-avatar svg{width:15px!important;height:15px!important}
  .v199-sign{
    min-width:0!important;
    width:auto!important;
    max-width:68px!important;
    height:30px!important;
    padding:0 7px!important;
    font-size:9.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* ----- Party nav: scroll INSIDE nav, never move whole page sideways ----- */
  .v199-navrow,
  .v339-navrow-option5{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    min-height:58px!important;
    padding:6px 0 6px max(8px,env(safe-area-inset-left,0))!important;
    display:block!important;
    overflow:hidden!important;
  }
  .v339-split-nav,
  .v319-premium-nav{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 max(8px,env(safe-area-inset-right,0)) 3px 0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
  }
  .v339-split-nav::-webkit-scrollbar,
  .v319-premium-nav::-webkit-scrollbar{display:none!important}
  .v339-split-nav .v319-pill,
  .v319-premium-nav .v319-pill{
    flex:0 0 auto!important;
    min-width:max-content!important;
    height:43px!important;
    padding:0 9px!important;
    gap:5px!important;
    border-radius:13px!important;
    font-size:9.6px!important;
    white-space:nowrap!important;
  }
  .v339-split-nav .v319-pill:first-child{margin-left:0!important}
  .v339-split-nav .v319-ico,
  .v319-premium-nav .v319-ico{
    width:22px!important;
    height:22px!important;
    flex:0 0 22px!important;
    border-radius:8px!important;
  }
  .v339-split-nav .v319-ico svg,
  .v319-premium-nav .v319-ico svg{
    width:15px!important;
    height:15px!important;
  }
  .v339-split-nav .v319-pill span:last-child,
  .v319-premium-nav .v319-pill span:last-child{display:inline!important}
  .v199-nav-right,.v339-nav-tools{display:none!important}

  /* ----- Main party/user content: no horizontal clipping ----- */
  body>main,
  main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
    overflow-x:hidden!important;
  }
  main>.section,
  .v196-access,
  .v196-dashboard,
  .v178-dashboard,
  .v179-access{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* ----- Party hero: artwork remains inside card, text never pushes width ----- */
  .v196-access.v198-hero{
    min-height:220px!important;
    padding:22px 18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  .v198-hero .v196-access-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    position:relative!important;
    z-index:4!important;
  }
  .v198-hero .v196-access-copy h2{
    max-width:78%!important;
    margin-right:0!important;
    font-size:23px!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }
  .v198-hero .v196-access-copy p{
    max-width:74%!important;
    font-size:12.5px!important;
    line-height:1.55!important;
    overflow-wrap:anywhere!important;
  }
  .v196-access-actions{max-width:74%!important;gap:8px!important;margin-top:16px!important}
  .v196-btn{width:100%!important;min-height:42px!important;font-size:12px!important;padding:0 12px!important}
  .v198-slider{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    left:auto!important;
    right:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    z-index:1!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  .v198-slide{
    background-position:center right!important;
    background-size:cover!important;
  }
  .v198-slider::after{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(90deg,rgba(244,247,253,.98) 0%,rgba(244,247,253,.95) 46%,rgba(244,247,253,.62) 66%,rgba(244,247,253,.05) 100%)!important;
  }
  .v263-hero-arrow,.v198-dots{display:none!important}

  /* ----- Dashboard/cards stay inside phone width ----- */
  .v196-dashboard{padding:18px 0 0!important}
  .v196-welcome,.v178-welcome{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .v196-welcome h2,.v178-welcome h2{overflow-wrap:anywhere!important}
  .v196-stat-grid,.v178-cards,.v196-actions,.v178-actions{max-width:100%!important;min-width:0!important}

  /* ----- Floating assistant/share controls respect iPhone safe area ----- */
  #mpcHelpWidget{
    right:max(10px,env(safe-area-inset-right,0))!important;
    bottom:max(14px,calc(env(safe-area-inset-bottom,0) + 8px))!important;
    max-width:calc(100vw - 20px)!important;
  }
  #v633GlobalSocialShare{
    max-width:calc(100vw - 105px)!important;
    right:max(86px,calc(env(safe-area-inset-right,0) + 86px))!important;
    bottom:max(16px,calc(env(safe-area-inset-bottom,0) + 10px))!important;
  }
}

@media (max-width: 430px){
  .v199-top-main{min-height:60px!important;padding-top:6px!important;padding-bottom:6px!important}
  .v199-brand{max-width:132px!important}
  .v199-brand.v474-mantra-brand .brandmark{width:32px!important;height:32px!important;flex-basis:32px!important}
  .v199-brand.v474-mantra-brand .v474-mantra-wordmark{width:76px!important;height:36px!important}
  .v199-account{max-width:96px!important}
  .v199-avatar{width:28px!important;height:28px!important;flex-basis:28px!important}
  .v199-sign{height:28px!important;max-width:60px!important;padding:0 6px!important;font-size:8.8px!important}
  .v339-split-nav .v319-pill,.v319-premium-nav .v319-pill{height:40px!important;padding:0 8px!important;font-size:9px!important}
  .v198-hero .v196-access-copy h2{font-size:21px!important;max-width:80%!important}
  .v198-hero .v196-access-copy p,.v196-access-actions{max-width:78%!important}
}

/* =========================================================
   PUBLIC WEBSITE MOBILE HERO — show the COMPLETE poster/image.
   This intentionally uses contain on phone screens to avoid crop.
   ========================================================= */
@media (max-width: 760px){
  body.v634-public-home header{
    width:100%!important;
    max-width:100vw!important;
    height:66px!important;
    min-height:66px!important;
    overflow:hidden!important;
  }
  body.v634-public-home header .wrap.nav{
    width:100%!important;
    max-width:100%!important;
    padding-left:max(10px,env(safe-area-inset-left,0))!important;
    padding-right:max(10px,env(safe-area-inset-right,0))!important;
    gap:8px!important;
  }
  body.v634-public-home header .v462-brand-logo{
    min-width:0!important;
    max-width:145px!important;
  }
  body.v634-public-home header .v462-logo-img{
    width:auto!important;
    max-width:138px!important;
    max-height:48px!important;
    object-fit:contain!important;
  }
  body.v634-public-home header .links,
  body.v634-public-home header .v456-search,
  body.v634-public-home header .v456-quote{display:none!important}
  body.v634-public-home header .v456-header-actions{margin-left:auto!important;flex:0 0 auto!important}
  body.v634-public-home header .login{
    min-width:0!important;
    min-height:36px!important;
    height:36px!important;
    padding:0 11px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  :root{--v466-header-h:66px!important;--v461-hero-vh:calc(100svh - 66px)!important}
  .hero.v456-hero{
    width:100%!important;
    max-width:100vw!important;
    height:calc(100svh - 66px)!important;
    min-height:0!important;
    max-height:calc(100svh - 66px)!important;
    overflow:hidden!important;
    background:#050708!important;
  }
  .v456-hero .v455-hero-visual.visual,
  .v456-hero .v455-hero-track,
  .v456-hero .v455-hero-slide{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  .v456-hero .v455-hero-slide{
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#050708!important;
  }
  .v456-hero .v455-hero-slide::after{display:none!important}
  .v456-hero .v455-hero-arrow{
    width:34px!important;
    height:34px!important;
    font-size:22px!important;
    opacity:.74!important;
  }
  .v456-hero .v455-hero-arrow.prev{left:8px!important}
  .v456-hero .v455-hero-arrow.next{right:8px!important}
  .v456-hero .v455-hero-thumbs{
    right:50%!important;
    left:auto!important;
    transform:translateX(50%)!important;
    bottom:max(10px,env(safe-area-inset-bottom,0))!important;
    max-width:70vw!important;
  }
  .v460-hero-tagline{
    left:12px!important;
    right:12px!important;
    bottom:max(44px,calc(env(safe-area-inset-bottom,0) + 38px))!important;
    max-width:75%!important;
  }
  .v460-hero-tagline strong{font-size:8px!important;letter-spacing:2px!important}
  .v460-hero-tagline span{font-size:7px!important;letter-spacing:1.8px!important}
}

@media (max-width: 430px){
  body.v634-public-home header{height:62px!important;min-height:62px!important}
  body.v634-public-home header .v462-logo-img{max-width:124px!important;max-height:44px!important}
  body.v634-public-home header .login{height:34px!important;min-height:34px!important;padding:0 9px!important;font-size:9px!important}
  :root{--v466-header-h:62px!important;--v461-hero-vh:calc(100svh - 62px)!important}
  .hero.v456-hero{height:calc(100svh - 62px)!important;max-height:calc(100svh - 62px)!important}
}