/* One-viewport cards (only when the stacked effect is on) */
html.stk-on header{z-index:200}
html.stk-on .stk{height:calc(100vh - var(--so,0px));height:calc(100svh - var(--so,0px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:max(10px,calc(var(--hh,72px) + 10px - var(--so,0px))) 0 14px!important;margin:0!important}
html.stk-on .stk>.cin{width:100%;flex:0 0 auto}
html.stk-on .stk.scr>.cin{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
html.stk-on .stk .wrap{padding-top:0;padding-bottom:0}
html.stk-on .stk h2{font-size:clamp(22px,2.2vw + 10px,40px);line-height:1.15;margin-top:4px}
html.stk-on .stk .eyebrow,html.stk-on .stk .lbl{margin-bottom:6px}
/* Why Zeyn */
html.stk-on #problem .big{font-size:clamp(14px,.6vw + 11px,19px);margin-top:12px}
html.stk-on #problem .grid{margin-top:clamp(14px,3vh,34px);gap:clamp(10px,1.4vw,22px)}
html.stk-on #problem .card{padding:clamp(14px,2vh,26px)}
/* How */
html.stk-on #how{background:linear-gradient(120deg,rgba(32,68,47,.94),rgba(10,20,14,.95)),url(../img/howbg.jpg) center/cover;color:#fff}
html.stk-on #how .how-c{background:none!important;padding:0!important}
html.stk-on #how .how-c .steps .s{padding-bottom:clamp(6px,1.2vh,14px)}
html.stk-on #how .how-c .box{padding:clamp(10px,1.5vh,18px) 16px}
html.stk-on #how .how-c .gar{margin-top:clamp(12px,2.5vh,28px)}
@media(max-width:800px){html.stk-on #how .how-c .g{gap:14px}html.stk-on #how .how-c .box{gap:4px}html.stk-on #how .how-c .gar>span:not(.ic){display:none}}
/* Services: tallest pane sets height, panes swap in place */
html.stk-on .sA .stb{margin-top:14px}
html.stk-on .sA .sblk>.wrap>.panes{display:grid}
html.stk-on .sA details ul{max-height:28svh;overflow-y:auto}
html.stk-on .sA .ssub{padding-top:14px!important}
html.stk-on .sA .sbar{margin-top:14px!important}
/* Work carousel */
html.stk-on .work .wtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:clamp(12px,2.5vh,28px);padding-bottom:4px}
html.stk-on .work .wtrack::-webkit-scrollbar{display:none}
html.stk-on .work .wtrack>article{flex:0 0 100%;scroll-snap-align:start;margin:0;box-sizing:border-box;display:grid;grid-template-columns:1fr;gap:16px;padding:clamp(14px,2.4vh,32px) clamp(14px,2vw,40px);align-items:center}
@media(min-width:800px){html.stk-on .work .wtrack>article{grid-template-columns:1.2fr 1fr;gap:36px}html.stk-on .work .wtrack .mock{max-width:min(100%,calc((100svh - 330px) * 1.45));margin-inline:auto;width:100%}}
@media(max-width:799px){html.stk-on .work .wtrack .mock{max-width:min(100%,calc((100svh - 400px) * 1.35));margin-inline:auto;width:100%}}
html.stk-on .work .wtrack .ftag{display:none}
html.stk-on .work .wnav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
html.stk-on .work .wnav button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer}
html.stk-on .work .wnav .dots{display:flex;gap:8px}html.stk-on .work .wnav .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}html.stk-on .work .wnav .dots i.on{background:#fff}
html[dir=rtl].stk-on .work .wnav .wp,html[dir=rtl].stk-on .work .wnav .wn{transform:scaleX(-1)}
html.stk-on .work .wcta{margin-top:12px}
/* Pricing */
html.stk-on .prc .pkgs{margin-top:clamp(12px,2.5vh,32px)}
html.stk-on .prc .pkg{padding:clamp(14px,2vh,24px) 20px}
html.stk-on .prc .pkg ul{margin:10px 0 12px;padding-top:10px}
html.stk-on .prc .pkg li{padding-top:2px;padding-bottom:2px;font-size:13px}
@media(max-width:900px){html.stk-on .prc .pkgs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;scrollbar-width:none;padding:12px 2px 4px}
 html.stk-on .prc .pkgs>.pkg{flex:0 0 88%;scroll-snap-align:center}html.stk-on .prc .pkgs::-webkit-scrollbar{display:none}
 html.stk-on .prc .swhint{display:block;text-align:center;font-size:12px;opacity:.6;margin-top:6px}}
html.stk-on .prc .swhint{display:none}
html.stk-on .prc .care,html.stk-on .prc .pfoot{margin-top:clamp(10px,2vh,24px)}
html.stk-on .prc.pc2,html.stk-on .prc.pc3{background:var(--cream)}
/* FAQ */
html.stk-on #faq .faq{margin-top:clamp(10px,2vh,24px)}
html.stk-on #faq .faq details{padding:clamp(9px,1.6vh,16px) 0}
@media(min-width:1000px){html.stk-on #faq .faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}}
/* Services compact */
html.stk-on .sA .panes>.spane{display:none}html.stk-on .sA .panes>.spane.on{display:grid;grid-template-columns:1fr;gap:10px;align-content:start}
@media(min-width:900px){html.stk-on .sA .panes>.spane{grid-template-columns:1fr 1fr}html.stk-on .sA .panes>.spane details[open]{grid-column:auto}}
html.stk-on .sA .srow{margin:0;padding:clamp(10px,1.6vh,18px) 16px;gap:12px}
html.stk-on .sA .sic{width:36px;height:36px}
html.stk-on .sA .sbar{padding:10px 16px}
html.stk-on .sA .stb{margin:12px 0 12px;padding:4px}
html.stk-on .sA .tb{padding:9px 14px}
html.stk-on .sA details ul{columns:2;column-gap:20px;max-height:none}
@media(max-width:800px){html.stk-on .sA .stb{grid-template-columns:repeat(3,1fr);gap:4px}html.stk-on .sA .tb{padding:8px 6px;text-align:center}html.stk-on .sA .tb b{font-size:13px}
 html.stk-on .sA .sbt{font-size:0}html.stk-on .sA .sbt b{font-size:14px;margin:0}html.stk-on .sA .sbb{margin-inline-start:0;padding:7px 14px;font-size:13px}html.stk-on .sA .sbar{gap:10px;flex-wrap:nowrap}
 html.stk-on .sA .sbi{display:none}html.stk-on .sA .ssub{display:none}html.stk-on .sA .sbn{font-size:13px;margin-top:2px}html.stk-on .sA details ul{columns:1}html.stk-on .sA .srow{padding:10px 12px}}
/* How on mobile: steps become a swipe row */
@media(max-width:800px){
 html.stk-on #how .how-c .gar{padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
 html.stk-on #how .how-c .gar .ic{grid-row:span 1}html.stk-on #how .how-c .gar .btn{grid-column:1/-1;justify-self:start;padding:9px 16px;margin-top:4px}
 html.stk-on #how .how-c .steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
 html.stk-on #how .how-c .steps::-webkit-scrollbar{display:none}
 html.stk-on #how .how-c .steps .s{flex:0 0 82%;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:0}
 html.stk-on #how .how-c .steps .s:after{display:none}
 html.stk-on #how .how-c .n{width:40px;height:40px}html.stk-on #how .how-c .box{flex:1}
 html.stk-on #how .swhint{display:block;text-align:center;font-size:12px;opacity:.6;margin-top:8px}}
html.stk-on #how .swhint{display:none}
/* Work on phones */
@media(max-width:799px){html.stk-on .work .wtrack .mock{max-width:min(100%,calc((100svh - 500px) * 1.5))}html.stk-on .work .phead>img{display:none}html.stk-on .work .mapbtn img{display:none}html.stk-on .work .pact{display:flex;flex-wrap:wrap;gap:8px}html.stk-on .work .lead{font-size:13px}}
/* Pricing phones */
@media(max-width:800px){html.stk-on .prc .plead{font-size:13px}html.stk-on .prc .pkg li{font-size:12.5px}html.stk-on .prc .cplans{gap:8px}html.stk-on .prc .cp{padding:12px 14px}}
@media(max-width:799px) and (max-height:700px){html.stk-on .work .wtrack>article{gap:10px;padding:12px}html.stk-on .work .pdesc{font-size:13px}html.stk-on .work .lead{display:none}html.stk-on .work .wnav{margin-top:8px}html.stk-on .work .wnav button{width:32px;height:32px}html.stk-on .work .wcta{margin-top:8px}
 html.stk-on #problem .big{font-size:13.5px}html.stk-on #problem .card p{font-size:13px}html.stk-on #problem .card h3{font-size:15px}}
@media(max-width:800px) and (max-height:700px){html.stk-on .prc .care{padding:14px}html.stk-on .prc .pkg{padding:12px 16px}html.stk-on .prc .pkg ul{margin:6px 0 8px;padding-top:6px}html.stk-on .prc .pfoot{gap:10px}html.stk-on .prc .pterms,html.stk-on .prc .pfound{padding:14px}}
.sdlg{border:0;border-radius:20px;padding:22px 22px 18px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100svh - 48px);box-sizing:border-box;background:#13261c;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sdlg::backdrop{background:rgba(10,20,14,.55);backdrop-filter:blur(3px)}
.sdlg h3{font-size:17px;margin:0 36px 12px 0;color:#fff}.sdlg[dir=rtl] h3{margin:0 0 12px 36px}
.sdlg .sdx{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:20px;cursor:pointer}
.sdlg .sdb{overflow-y:auto;max-height:calc(100svh - 150px)}.sdlg ul{margin:0;padding-inline-start:20px}.sdlg li{font-size:14px;line-height:1.5;padding:3px 0;color:rgba(255,255,255,.85)}
@media(min-width:900px){html.stk-on .sA .panes>.spane.on{grid-template-columns:1fr 1fr}}
html.stk-on .sA .sbd{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;flex:1;min-width:0}
html.stk-on .sA .sbd>h3{grid-column:1;grid-row:1;margin:0}html.stk-on .sA .sbd>details{grid-column:2;grid-row:1;margin:0}html.stk-on .sA .sbd>details summary{margin:0;white-space:nowrap}
html.stk-on .sA .sbd>.sbn{grid-column:1/-1}
@media(max-width:800px){html.stk-on .sA .sic{width:30px;height:30px}html.stk-on .sA .srow{gap:10px}html.stk-on .sA .sbd>h3{font-size:14.5px}}