/* Kraark v20: mobile-first containment and accessible public navigation */
html{max-width:100%;overflow-x:clip}
body{max-width:100%;overflow-x:clip}
#kraark-app{width:100%;max-width:100%;min-width:0;overflow-x:clip}
#kraark-app *{min-width:0}
#kraark-app img,#kraark-app svg,#kraark-app video,#kraark-app iframe{max-width:100%}
#kraark-app .wrap{width:100%;max-width:1190px}
#kraark-app .hero-grid>*,#kraark-app .dashboard>*,#kraark-app .k-demo-layout>*{min-width:0}
#kraark-app .hero h1{overflow-wrap:break-word}
#kraark-app .hero-showcase{width:100%;min-width:0}
#kraark-app .glass{max-width:100%}
#kraark-app .nav{position:relative;z-index:50}
#kraark-app .k-mobile-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #e7def2;border-radius:11px;background:#f6f0ff;color:#5125a3;font-size:23px;flex-shrink:0}
#kraark-app .k-mobile-toggle:focus-visible{outline:3px solid #9e75f5;outline-offset:2px}
@media(max-width:1000px){
#kraark-app .nav{gap:12px}
#kraark-app .k-mobile-toggle{display:inline-flex}
#kraark-app .navlinks{display:none;position:absolute;top:calc(100% - 3px);left:17px;right:17px;flex-direction:column;gap:0;background:white;border:1px solid #e8dff2;border-radius:15px;box-shadow:0 18px 42px #2110352b;padding:9px;z-index:60}
#kraark-app .navlinks.k-mobile-open{display:flex}
#kraark-app .navlinks a{padding:13px 14px;border-radius:9px;display:block;white-space:normal}
#kraark-app .navlinks a:hover{background:#f4eeff}
}
@media(max-width:680px){
#kraark-app .wrap{padding-left:18px;padding-right:18px}
#kraark-app .nav{height:70px;flex-wrap:nowrap}
#kraark-app .brand{font-size:22px;gap:8px;white-space:nowrap}
#kraark-app .brand-icon{width:35px;height:35px;flex-shrink:0}
#kraark-app .brand-icon img{width:29px;height:29px}
#kraark-app .nav>.actions{margin-left:auto;gap:7px}
#kraark-app .nav>.actions .btn{padding:10px 12px;font-size:11px;white-space:nowrap}
#kraark-app .hero-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding:40px 0 60px}
#kraark-app .hero h1{font-size:clamp(31px,9vw,45px);letter-spacing:-1.5px;line-height:1.17}
#kraark-app .hero p{font-size:14px;line-height:1.7}
#kraark-app .hero-buttons{gap:9px}
#kraark-app .hero-buttons .btn{max-width:100%;padding:12px 15px}
#kraark-app .hero-showcase{width:100%;padding-bottom:18px}
#kraark-app .glass{padding:14px;border-radius:17px}
#kraark-app .show-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
#kraark-app .show-metrics div{padding:12px}
#kraark-app .show-metrics b{font-size:19px;overflow-wrap:anywhere}
#kraark-app .floating{position:relative;right:auto;bottom:auto;margin:12px 0 0;padding:12px 16px;max-width:100%;font-size:13px}
#kraark-app .section{padding:52px 0}
#kraark-app .section-heading h2{font-size:clamp(25px,7vw,34px);letter-spacing:-.8px}
#kraark-app .three,#kraark-app .format-grid,#kraark-app .steps{grid-template-columns:minmax(0,1fr)}
#kraark-app .tile,#kraark-app .format{padding:21px}
#kraark-app .dashboard{width:100%;max-width:100%;border-radius:15px}
#kraark-app .dash-main{width:100%;min-width:0;padding:14px}
#kraark-app .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
#kraark-app .kpi{min-width:0}
#kraark-app .kpi strong{overflow-wrap:anywhere}
#kraark-app .dash-grid{grid-template-columns:minmax(0,1fr)}
#kraark-app .chart{max-width:100%;overflow:hidden}
#kraark-app .table-panel{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
#kraark-app .role-tabs{max-width:100%;overflow-x:auto}
#kraark-app .role-tabs button{white-space:nowrap}
#kraark-app .cta{padding:25px}
#kraark-app .cta h2{font-size:25px}
#kraark-app .footer .wrap{display:block}
#kraark-app .k-browser-zone,#kraark-app .k-demo-layout,#kraark-app .k-sample-site{width:100%;max-width:100%;min-width:0}
#kraark-app .k-browser-url{padding:4px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
#kraark-app .k-demo-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
#kraark-app .k-sample-columns{grid-template-columns:minmax(0,1fr) 85px}
#kraark-app .k-sample-feature h3{font-size:18px}
#kraark-app .k-article-picture{min-width:45px;width:45px}
#kraark-app .k-article{min-width:0;overflow-wrap:anywhere}
#kraark-app .k-ad-message{min-width:0}
#kraark-app .k-demo-ad{min-width:0}
}
@media(max-width:360px){
#kraark-app .nav>.actions .btn{padding:9px 8px;font-size:10px}
#kraark-app .brand{font-size:19px}
#kraark-app .hero h1{font-size:30px}
#kraark-app .kpi strong{font-size:17px}
}

/* v21: fix actual hero container: .hero-grid overrides .wrap padding */
@media(max-width:1000px){
#kraark-app .hero .hero-grid.wrap{padding-left:clamp(18px,5vw,32px)!important;padding-right:clamp(18px,5vw,32px)!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;margin-inline:auto!important;}
#kraark-app .hero .hero-grid>div{width:100%;max-width:100%;min-width:0}
#kraark-app .hero .hero-grid .eyebrow{font-size:clamp(9px,2.7vw,12px);letter-spacing:.08em;overflow-wrap:anywhere}
#kraark-app .hero .hero-grid h1{max-width:100%;overflow-wrap:normal}
#kraark-app .hero .hero-grid p{max-width:100%}
#kraark-app .hero .hero-buttons{display:flex;flex-wrap:wrap;align-items:stretch}
#kraark-app .hero .hero-buttons .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;max-width:100%;white-space:normal;text-align:center}
#kraark-app .hero .hero-showcase{margin-inline:0;max-width:100%;width:100%}
#kraark-app .hero .show-top{flex-wrap:wrap;gap:10px}
#kraark-app .hero .show-metrics{min-width:0}
#kraark-app .hero .show-metrics>*{min-width:0}
#kraark-app .hero .show-metrics b{overflow-wrap:anywhere}
}
@media(max-width:420px){
#kraark-app .hero .hero-grid.wrap{padding-left:20px!important;padding-right:20px!important;padding-top:42px!important;padding-bottom:52px!important}
#kraark-app .hero .hero-grid h1{font-size:clamp(35px,10vw,43px);line-height:1.16}
#kraark-app .hero .hero-buttons{gap:10px}
#kraark-app .hero .hero-buttons .btn{padding:12px 14px;font-size:13px}
#kraark-app .hero .glass{padding:15px}
#kraark-app .hero .show-top strong{font-size:13px}
}
#kraark-app .k-arrow-icon{width:15px;height:15px;display:inline-block;vertical-align:-2px;flex:0 0 15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}