/*
 * Deskia v2.47.9 — responsive QA consolidation
 * Final override layer. Keeps the approved desktop visual language while
 * fixing header/nav CTAs, small-screen navigation, touch targets and a few
 * compact pricing components found during viewport QA.
 */

/* ----- Shared header/nav baseline ----- */
.nav-mobile-actions{display:none}

/* Commercial-polish was re-enabling the service byline below its intended
   desktop breakpoint. Keep it only where there is genuinely enough room. */
@media(max-width:1180px){
  .site-header .brand-service{display:none!important}
}

@media(max-width:1020px){
  .site-header .header-inner{
    min-width:0!important;
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
  }
  .site-header .header-brand-group{min-width:0!important;overflow:hidden!important}
  .site-header .brand.brand-image{min-width:0!important}
  .site-header .brand.brand-image .brand-logo{max-width:154px!important;width:auto!important}

  .site-header .main-nav{
    top:calc(68px + env(safe-area-inset-top))!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-height:calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    padding:14px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  .site-header .main-nav>a,
  .site-header .nav-group-button{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:10px 12px!important;
    border-radius:10px!important;
  }
  .site-header .nav-group.is-open .nav-dropdown{display:block!important}
  .site-header .nav-dropdown{
    max-width:100%!important;
    overflow:hidden!important;
  }

  .nav-mobile-actions{
    display:grid!important;
    grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
    gap:8px;
    margin-top:8px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .nav-mobile-login,
  .nav-mobile-trial{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-family:"Montserrat",sans-serif!important;
    font-size:12px!important;
    font-weight:600!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .nav-mobile-login{
    border:1px solid rgba(255,255,255,.13)!important;
    background:rgba(255,255,255,.035)!important;
    color:#fff!important;
  }
  .nav-mobile-trial{
    padding:0 15px!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  .nav-mobile-trial:hover{transform:none!important}
}

/* Phones: keep the chrome clean. The conversion CTA lives inside the opened
   nav at full readable size rather than collapsing into an unreadable pill. */
@media(max-width:720px){
  .site-header .header-inner{
    height:64px!important;
    min-height:64px!important;
    gap:8px!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  .site-header .header-brand-group{flex:0 1 auto!important;margin-right:auto!important}
  .site-header .brand.brand-image .brand-logo{
    height:30px!important;
    max-width:132px!important;
  }
  .site-header .header-actions{display:none!important}
  .site-header .nav-toggle{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
  }
  .site-header .main-nav{
    top:calc(64px + env(safe-area-inset-top))!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    max-height:calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    border-radius:15px!important;
  }
  .site-header .nav-dropdown-label{padding:7px 9px 5px!important}
  .site-header .nav-info-channel-grid{grid-template-columns:1fr!important}
  .site-header .nav-info-channel{min-height:58px!important}
  .nav-mobile-actions{grid-template-columns:1fr!important}
  .nav-mobile-login,.nav-mobile-trial{min-height:46px!important;font-size:13px!important}

  /* Cookie controls remain comfortably tappable. */
  .ic-cookie-button{min-height:44px!important}
  .site-footer button.footer-cookie-button{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
  }
}

@media(max-width:390px){
  .site-header .brand.brand-image .brand-logo{height:29px!important;max-width:122px!important}
  .site-header .nav-toggle{flex-basis:40px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
}

@media(max-width:340px){
  .site-header .header-inner{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
  .site-header .brand.brand-image .brand-logo{max-width:112px!important}
  .site-header .main-nav{left:5px!important;right:5px!important;padding:11px!important}
}

/* ----- Pricing responsive polish ----- */
@media(max-width:480px){
  body.page-pricing-premium .pp-consumption-tags{grid-template-columns:1fr!important}
  body.page-pricing-premium .pp-consumption-tags .pp-channel-cost{
    grid-template-columns:42px minmax(0,1fr)!important;
    min-height:78px!important;
    padding:13px 14px!important;
  }
  body.page-pricing-premium .pp-channel-cost strong,
  body.page-pricing-premium .pp-channel-cost small{min-width:0!important;overflow-wrap:anywhere!important}
}
body.page-pricing-premium .pp-table-wrap{max-width:100%!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch}

/* ----- General small-screen hardening ----- */
@media(max-width:720px){
  .hero-actions,.conversion-actions{max-width:100%}
  .hero-actions .button,.conversion-actions .button{max-width:100%}
  .original-snapshot-frame img,.feature-screen img,.solution-card-media img,.mj-card-media img{max-width:100%;height:auto}
}

/* Keep the primary conversion action visible in the compact header as well.
   The menu repeats it as a full-width action, but the header CTA must never
   collapse into an empty gradient pill. */
@media(max-width:720px){
  .site-header .header-actions{
    display:flex!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    min-width:0!important;
  }
  .site-header .header-actions .button{
    display:inline-flex!important;
    width:auto!important;
    max-width:none!important;
    min-height:38px!important;
    padding:0 9px!important;
    border-radius:9px!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .site-header .header-actions .button .header-trial-lead,
  .site-header .header-actions .button .header-trial-tail,
  .site-header .header-actions .button .header-trial-arrow{display:inline-block!important}
  .site-header .brand.brand-image .brand-logo{max-width:112px!important}
}
@media(max-width:390px){
  .site-header .header-inner{gap:6px!important;padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
  .site-header .brand.brand-image .brand-logo{max-width:98px!important;height:28px!important}
  .site-header .header-actions .button{padding:0 7px!important;font-size:10px!important}
  .site-header .header-actions .button .header-trial-arrow{display:none!important}
  .site-header .nav-toggle{flex-basis:38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}
}
@media(max-width:340px){
  .site-header .brand.brand-image .brand-logo{max-width:90px!important;height:27px!important}
  .site-header .header-actions .button{padding:0 6px!important;font-size:9.5px!important}
  .site-header .nav-toggle{flex-basis:36px!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
}