/* DEVICE FRIENDLY UI v5 — final cascade layer */
html, body { max-width:100%; overflow-x:hidden; }

/* Logo containers: runtime auto-crops transparent padding. */
.site-header .brand-media,
.footer-brand .brand-media,
.auth-header .site-brand{
  position:relative !important;
  overflow:hidden !important;
}
.site-header .brand-media{
  width:220px !important;
  height:58px !important;
  flex:0 0 220px !important;
}
.footer-brand .brand-media{
  width:240px !important;
  height:66px !important;
}
.auth-header .site-brand{
  width:220px !important;
  max-width:220px !important;
  height:58px !important;
  flex:0 0 220px !important;
}
.site-header .brand-logo,
.footer-brand .brand-logo,
.auth-header .brand-logo{
  margin:0 !important;
}

/* Homepage header */
.site-header .nav-wrap{
  width:min(calc(100% - 40px),1240px) !important;
  min-height:72px !important;
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:28px !important;
}
.site-header .desktop-nav{
  display:flex !important;
  justify-content:center !important;
  min-width:0 !important;
}
.site-header .nav-actions{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}

/* Pricing is NEVER a carousel anymore. */
#pricing .pricing-carousel-wrap{display:contents !important;}
#pricing .pricing-arrow,
#pricing .pricing-dots{display:none !important;}
#pricing #pricingCarousel,
#pricing .pricing-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:min(100%,1180px) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:8px 0 !important;
  gap:18px !important;
  overflow:visible !important;
  overflow-x:visible !important;
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
  transform:none !important;
}
#pricing #pricingCarousel > .price-card,
#pricing .pricing-grid > .price-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:unset !important;
  transform:none !important;
  scroll-snap-align:none !important;
  box-sizing:border-box !important;
}
#pricing .price-card .full{margin-top:auto !important;}

/* Auth header */
.auth-header .auth-nav{
  width:min(calc(100% - 40px),1240px) !important;
  height:72px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:26px !important;
}
.auth-header .desktop-links{
  display:flex !important;
  justify-content:center !important;
  min-width:0 !important;
}
.auth-header .nav-actions{
  justify-self:end !important;
  margin-left:0 !important;
}

/* Auth desktop */
.auth-layout{
  width:min(calc(100% - 64px),1240px) !important;
  min-height:calc(100dvh - 72px) !important;
  margin:0 auto !important;
  padding:36px 0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(410px,500px) !important;
  gap:clamp(52px,7vw,108px) !important;
  align-items:center !important;
}
.auth-intro{display:flex !important; width:auto !important;}
.auth-intro .intro-inner{max-width:650px !important;}
.auth-intro h1{
  max-width:650px !important;
  font-size:clamp(44px,4.8vw,68px) !important;
  line-height:1.02 !important;
  letter-spacing:-.052em !important;
  text-wrap:balance !important;
  overflow-wrap:normal !important;
}
.auth-intro .app-highlight,
.auth-intro [data-app]{
  display:inline-block !important;
  max-width:100% !important;
  vertical-align:baseline !important;
}
.auth-form-area{
  width:100% !important;
  max-width:500px !important;
  justify-self:end !important;
}
.auth-card{width:100% !important;}

/* Medium screens */
@media (max-width:1100px){
  #pricing #pricingCarousel,
  #pricing .pricing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:min(100%,820px) !important;
  }
  #pricing .price-card:last-child{
    grid-column:1/-1 !important;
    width:min(100%,401px) !important;
    justify-self:center !important;
  }

  .site-header .desktop-nav,
  .auth-header .desktop-links{
    display:none !important;
  }
  .site-header .nav-wrap,
  .auth-header .auth-nav{
    display:flex !important;
    gap:12px !important;
  }
  .site-header .brand,
  .auth-header .site-brand{
    margin-right:auto !important;
  }

  .auth-layout{
    width:min(calc(100% - 40px),760px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:22px !important;
  }
  .auth-form-area{
    max-width:760px !important;
    justify-self:auto !important;
  }
}

/* Device classifier overrides media-query ambiguity / Android desktop-site mode. */
.vier-handheld .site-header .nav-wrap{
  width:calc(100% - 22px) !important;
  min-height:64px !important;
  height:64px !important;
  display:flex !important;
  gap:8px !important;
}
.vier-handheld .site-header .brand{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin-right:auto !important;
}
.vier-handheld .site-header .brand-media{
  width:180px !important;
  height:52px !important;
  flex:0 0 180px !important;
}
.vier-handheld .site-header .desktop-nav,
.vier-handheld .site-header .login-link{
  display:none !important;
}
.vier-handheld .site-header .nav-actions{
  margin-left:auto !important;
  gap:7px !important;
}
.vier-handheld .site-header .btn-sm{
  min-width:104px !important;
  padding-inline:14px !important;
}
.vier-handheld .site-header .menu-toggle{
  display:grid !important;
}

/* Handheld pricing: one full card per row, no partial card ever. */
.vier-handheld #pricing #pricingCarousel,
.vier-handheld #pricing .pricing-grid{
  grid-template-columns:1fr !important;
  width:min(calc(100% - 24px),620px) !important;
  gap:14px !important;
  padding:4px 0 !important;
}
.vier-handheld #pricing .price-card,
.vier-handheld #pricing .price-card:last-child{
  grid-column:auto !important;
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
  padding:24px !important;
}
.vier-handheld #pricing .pricing-arrow,
.vier-handheld #pricing .pricing-dots{
  display:none !important;
}

/* Handheld auth header */
.vier-handheld .auth-header{height:64px !important;}
.vier-handheld .auth-header .auth-nav{
  width:calc(100% - 22px) !important;
  height:64px !important;
  display:flex !important;
  gap:8px !important;
}
.vier-handheld .auth-header .site-brand{
  width:180px !important;
  max-width:180px !important;
  height:52px !important;
  flex:0 0 180px !important;
  margin-right:auto !important;
}
.vier-handheld .auth-header .desktop-links{display:none !important;}
.vier-handheld .auth-header .nav-actions{
  margin-left:auto !important;
  display:flex !important;
  gap:7px !important;
}
.vier-handheld .auth-header .nav-auth-link{
  display:inline-flex !important;
  height:38px !important;
}
.vier-handheld .auth-header .nav-icon{
  width:38px !important;
  height:38px !important;
}
.vier-handheld .auth-header .menu-btn{display:grid !important;}

/* Handheld auth: form-first, fit viewport naturally. */
.vier-handheld .auth-layout,
.vier-handheld .auth-layout.register-layout{
  width:min(calc(100% - 22px),620px) !important;
  min-height:calc(100dvh - 64px) !important;
  margin:0 auto !important;
  padding:18px 0 24px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:12px !important;
}
.vier-handheld .auth-intro{
  display:none !important;
}
.vier-handheld .auth-form-area{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.vier-handheld .auth-card,
.vier-handheld .register-card{
  width:100% !important;
  padding:20px !important;
  border-radius:20px !important;
  box-shadow:none !important;
}
.vier-handheld .register-card .two-col,
.vier-handheld .two-col{
  grid-template-columns:1fr !important;
}
.vier-handheld .secure-dot{
  display:none !important;
}

/* Very narrow phones */
.vier-phone .site-header .brand-media,
.vier-phone .auth-header .site-brand{
  width:150px !important;
  max-width:150px !important;
  flex-basis:150px !important;
}
.vier-phone .site-header .btn-sm{
  display:none !important;
}
.vier-phone .auth-header .nav-auth-link{
  display:none !important;
}
.vier-phone .auth-layout,
.vier-phone .auth-layout.register-layout{
  width:calc(100% - 16px) !important;
  padding:12px 0 18px !important;
}
.vier-phone .auth-card,
.vier-phone .register-card{
  padding:16px !important;
  border-radius:18px !important;
}

/* Footer logo */
.vier-handheld .footer-brand .brand-media{
  width:200px !important;
  height:60px !important;
}

/* Defensive overflow fixes */
.price-card,
.auth-card,
.register-card,
.auth-form-area,
.auth-layout,
.site-header,
.auth-header{
  min-width:0 !important;
  max-width:100%;
}