/* V8.2: natural page scrolling and content-safe breakpoints for every device. */
html{
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-behavior:smooth;
}
body{
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
}
.wrap{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-height:var(--app-height,100dvh)!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y!important;
}
.wrap.is-locked,
.wrap.is-scrollable{
  height:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}
img,video,svg,canvas{
  max-width:100%;
  height:auto;
}
input,select,textarea,button,.btn,.tool-btn{
  max-width:100%;
}
.card,.glass,.metric,.product-card,.checkout-form,.order-summary,.order-page{
  min-width:0;
  overflow-wrap:anywhere;
}

@media(max-width:380px){
  .wrap{padding-left:8px!important;padding-right:8px!important}
  .card{width:100%!important;padding:16px!important}
  .card-top{align-items:flex-start!important}
  .brand-pill{max-width:44%;white-space:normal!important;line-height:1.25}
  .language-switcher{width:52%!important;max-width:150px!important}
  .tool-grid:not(.signer-tool-grid){grid-template-columns:1fr!important}
  dl>div{grid-template-columns:1fr!important;gap:5px!important}
  dd{text-align:left!important}
}

@media(min-width:381px) and (max-width:767px){
  .card{width:min(100%,600px)!important}
}

@media(min-width:768px) and (max-width:1180px){
  .wide .card{width:min(940px,100%)!important}
}

@media(orientation:landscape) and (max-height:600px){
  .wrap{min-height:100dvh!important}
  .wrap>.card{margin:0 auto!important}
}



/* V11 public-layout guardrails */
body.has-fixed-shell{min-height:100dvh!important;overflow-x:hidden!important}
body.has-fixed-shell>.wrap{width:100%!important}
@media(max-width:380px){
  .tool-grid:not(.signer-tool-grid){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .tool-btn{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;font-size:clamp(9.5px,3vw,12px)!important}
  .tool-btn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* V15 viewport normalization */
html,body{width:100%!important;max-width:100%!important;min-height:100svh;min-height:100dvh;overflow-x:hidden!important;touch-action:manipulation!important}
img,svg,video,canvas{max-width:100%}


/* V20 fluid device compatibility: 320px phones through large desktop displays. */
:root{
  --fluid-gutter:clamp(8px,2.4vw,32px);
  --fluid-card-pad:clamp(14px,3.2vw,32px);
}
html{font-size:clamp(14px,0.18vw + 13.4px,17px)!important}
body{max-width:100vw!important}
.wrap{
  width:100%!important;
  padding-left:max(var(--fluid-gutter),env(safe-area-inset-left,0px))!important;
  padding-right:max(var(--fluid-gutter),env(safe-area-inset-right,0px))!important;
}
.wrap>.card{width:min(620px,100%)!important;max-width:100%!important}
.wrap.wide>.card,.wide .card{width:min(980px,100%)!important}
.card{padding:var(--fluid-card-pad)!important}
input,select,textarea,button,.btn,.tool-btn,.cta{font-size:clamp(12px,.45vw + 10.5px,15px)!important}
@media(min-width:768px){
  .wrap{padding-left:max(clamp(18px,3vw,44px),env(safe-area-inset-left,0px))!important;padding-right:max(clamp(18px,3vw,44px),env(safe-area-inset-right,0px))!important}
}
@media(min-width:1200px){
  .wrap>.card{width:min(680px,100%)!important}.wrap.wide>.card,.wide .card{width:min(1080px,100%)!important}
}
@media(min-width:1800px){
  .wrap>.card{width:min(760px,100%)!important}.wrap.wide>.card,.wide .card{width:min(1240px,100%)!important}
}
@media(max-width:359px){
  :root{--fluid-gutter:6px;--fluid-card-pad:13px}.tool-grid{gap:6px!important}.card{border-radius:20px!important}
}
@media(orientation:landscape) and (max-height:560px){
  .wrap{padding-top:8px!important;padding-bottom:8px!important}.card{padding-top:12px!important;padding-bottom:12px!important}
}


/* V22 final responsive guardrails: no clipped icons or controls at any viewport width. */
html,body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
*{min-width:0}
img,picture,video,canvas,svg{max-width:100%!important}
input,select,textarea,button,a,.btn,.tool-btn{box-sizing:border-box!important}
@media(max-width:479px){
  .wrap{padding-left:max(6px,env(safe-area-inset-left,0px))!important;padding-right:max(6px,env(safe-area-inset-right,0px))!important}
  .card{width:100%!important;padding-left:clamp(12px,4vw,18px)!important;padding-right:clamp(12px,4vw,18px)!important}
}
@media(min-width:480px) and (max-width:1023px){.wrap>.card{width:min(680px,100%)!important}}
@media(min-width:1024px){.wrap>.card{width:min(720px,100%)!important}.wrap.wide>.card,.wide .card{width:min(1160px,100%)!important}}
@media(min-width:1600px){.wrap>.card{width:min(780px,100%)!important}.wrap.wide>.card,.wide .card{width:min(1320px,100%)!important}}